How to format and validate a credit card number with spaces between each 4 digit while typing:
JavaScript
x
2
1
eg: 4464 6846 4354 3564
2
I have tried:
JavaScript
1
9
1
$('.creditno').keyup(function() {
2
cc = $(this).val().split("-").join("");
3
4
cc = cc.match(new RegExp('.{1,4}$|.{1,4}', 'g')).join("-");
5
6
$(this).val(cc);
7
8
});
9
Please help
Advertisement
Answer
Try this:
JavaScript
1
17
17
1
function cc_format(value) {
2
var v = value.replace(/s+/g, '').replace(/[^0-9]/gi, '')
3
var matches = v.match(/d{4,16}/g);
4
var match = matches && matches[0] || ''
5
var parts = []
6
7
for (i=0, len=match.length; i<len; i+=4) {
8
parts.push(match.substring(i, i+4))
9
}
10
11
if (parts.length) {
12
return parts.join(' ')
13
} else {
14
return value
15
}
16
}
17
Note: Check this for detailed information https://www.peterbe.com/plog/cc-formatter.
To restrict the user to enter number only:
Javascript Way
JavaScript
1
12
12
1
<input type="text" id="txt_cardNumber" name="txt_cardNumber" onkeypress="return checkDigit(event)">
2
3
function checkDigit(event) {
4
var code = (event.which) ? event.which : event.keyCode;
5
6
if ((code < 48 || code > 57) && (code > 31)) {
7
return false;
8
}
9
10
return true;
11
}
12
OR
JavaScript
1
22
22
1
function checkDigit() {
2
var allowedChars = "0123456789";
3
var entryVal = document.getElementById('txt_cardNumber').value();
4
var flag;
5
6
for(var i=0; i<entryVal.length; i++){
7
flag = false;
8
9
for(var j=0; j<allowedChars.length; j++){
10
if(entryVal.charAt(i) == allowedChars.charAt(j)) {
11
flag = true;
12
}
13
}
14
15
if(flag == false) {
16
entryVal = entryVal.replace(entryVal.charAt(i),""); i--;
17
}
18
}
19
20
return true;
21
}
22
HTML5 Way
JavaScript
1
3
1
<input type="text" id="txt_cardNumber" name="txt_cardNumber" pattern="[0-9.]+">
2
<input type="number" id="txt_cardNumber" name="txt_cardNumber">
3
jQuery Way
JavaScript
1
8
1
$("#txt_cardNumber").keypress(function (e) {
2
if ((e.which < 48 || e.which > 57) && (e.which !== 8) && (e.which !== 0)) {
3
return false;
4
}
5
6
return true;
7
});
8
Note: Please check here to get more information about various key code.