Restricting form input to a 16-digit number

Question

Here is the fiddle. I am trying to make it so when you type in your credit card number, it can only be a 16 digit number.

Right now I am using:

var i = $('#input1').val();
var ii = $('#input2').val();
var iii = $('#input3').val();
var iiii = $('#input4').val();
if (i !== "" && ii !== "" && iii !== "" && iiii !== '') {

but this allows it to be letters or symbols or numbers.

All you do is checking if the value entered is not an empty string... So your code works as designed! — Nabil Kadimi, Aug 19 '13 at 16:48
That just checks for empty. Read this: http://stackoverflow.com/questions/4514430/credit-card-checksums-and-validations-that-do-not-require-connection-to-the-fina — Diodeus - James MacFarlane, Aug 19 '13 at 16:49
Possible duplicate of : http://stackoverflow.com/questions/18104094/how-to-restrict-user-input-character-length-of-html5-input-type-number — AdityaSaxena, Aug 19 '13 at 16:49
@NabilKadimi But how do you make it so you just type in a number and the limit is 16??? riddle me that. — Joe Pigott, Aug 19 '13 at 16:50

score 1 · Answer 1 · answered Aug 19 '13 at 16:53

1

If you only care about validating if all are numbers, see this fiddle: http://jsfiddle.net/y7sf4/

It uses this function:

function IsNumeric(input)
{
    return (input - 0) == input && (input+'').replace(/^\s+|\s+$/g, "").length > 0;
}

But really you should try something that validates credit cards entirely, not just if it's a numeric 16 digit number.

Take a look at http://jquerycreditcardvalidator.com/

answered Aug 19 '13 at 16:53

Tor

784
1
13
25

I tried the validator but it didn't work for me. The code you proposed didn't work either. – Joe Pigott Aug 20 '13 at 21:46

score 0 · Answer 2 · answered Aug 19 '13 at 16:50

You can check each of the values with this function to ensure it is numeric, which is what I would probably do:

function isNumber(val) {
return !isNaN(val - 0) && val != null;
}

Or, if you wanted to get really fancy, you could always read up on regular expressions, and use javascripts regex functions... http://www.regular-expressions.info/creditcard.html

Patrick Evans · Answer 3 · 2013-08-21T09:44:46.170

You could use a single input, set the maxlenght, this will only allow 16 characters to be put into the textbox. Then just test the length and that all the characters are numbers with the javascript.

HTML

<input type="text" name="ccn" maxlength="16" id="ccn">

Javascript

var ccn = $('#ccn').val();
//Test the length, and use a regex to test 
//that there are 16 numbers
if( ccn.length < 16 || !/[0-9]{16}/.test(ccn) ) {
   //Invalid credit card number do error code here
}

or with staying with your grouped inputs set maxlength to 4 for each box and test each one for length and valid numbers

HTML

<input type="text" name="ccn1" maxlength="4" id="ccn1">
<input type="text" name="ccn2" maxlength="4" id="ccn2">
<input type="text" name="ccn3" maxlength="4" id="ccn3">
<input type="text" name="ccn4" maxlength="4" id="ccn4">

Javascript

function is_ccnGroup(group) {
    if( group.length < 4 || !/[0-9]{4}/.test(group) ) {
       return false;
    }

    return true;    
}

if( is_ccnGroup($('#ccn1').val()) &&
    is_ccnGroup($('#ccn2').val()) &&
    is_ccnGroup($('#ccn3').val()) &&
    is_ccnGroup($('#ccn4').val()) ) {
    // All the groups seem to be valid
} else {
   //One or more of the groups are invalid
}

Probably could also use jquery's .map function to cut down the code for the 4 groups way.

You can improve that HTML by adding a `pattern` attribute to accommodate modern browsers. — rink.attendant.6, Aug 19 '13 at 16:58
I have copy and pasted the code and I don't see what is supposed to be happening. Can you explain? — Joe Pigott, Aug 21 '13 at 01:13
forgot to add `!` infront of the regex check, and there was a syntax error, reedited answer to fix. [first fiddle](http://jsfiddle.net/yKnGk/),[second fiddle](http://jsfiddle.net/yKnGk/1/), in the first example `ccn.length < 16 || !/[0-9]{16}/.test(ccn)` means if the input is less then 16 characters or not all the characters are numbers, in the second example it grabs each of the four boxes inputs and checks if all 4 are 4 characters in length and are numbers — Patrick Evans, Aug 21 '13 at 09:48

Muleskinner · Answer 4 · 2013-08-19T17:05:35.083

0

You can do this in HTML(5), its as simple as:

<input type='number' pattern='.{16}' />

Note that not all browsers support type='number' or pattern though I believe the recent versions of all the major browsers do.

Check it out over at jsfiddle

edited Aug 19 '13 at 17:05

answered Aug 19 '13 at 16:58

Muleskinner

14,150
19
58
79

2

Doesn't look like all browsers support this yet, specifically firefox doesnt seem to support this at all, http://caniuse.com/input-number – Patrick Evans Aug 19 '13 at 17:05
my firefox supports it just fine, im at v.23.0.1 – Muleskinner Aug 19 '13 at 17:06
Hmm, must be that sites db is outdated then – Patrick Evans Aug 19 '13 at 17:07
sorry my mistake - pattern is supported in firefox, type='number' is not. type='number' is redundant in my answer, you can leave that out (for firefox) – Muleskinner Aug 19 '13 at 17:10

bastos.sergio · Answer 5 · 2013-08-19T17:07:27.303

0

Use the JQuery Mask Plugin... Then in your code you can set all fields to accept only numbers with this function:

$(document).ready(function () {

    ...
    $("#input4").mask("9999 9999 9999 9999");
});

jsfiddle here

edited Aug 19 '13 at 17:07

answered Aug 19 '13 at 17:00

bastos.sergio

6,684
4
26
36

Restricting form input to a 16-digit number

5 Answers5