Use JavaScript to allow only specific characters in HTML input

Question

I have written some JavaScript and jQuery code that accepts only numeric input in a textbox. But this is not enough; I need to limit the input to certain numbers.

This textbox needs to deal with SSN numbers (Swedish SSN), and it has to start with 19 or 20. I want to force it to start with these numbers, but I can't manage to limit it to these.

        $('input.SSNTB').keydown(function (event) {
          var maxNrOfChars = 12;
          var ssnNr = $('input.SSNTB').val();          
        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 ||
        // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) ||
        // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything               
            return;
        }
        else {              
            // Ensure that it is a number and stop the keypress
            if (((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105))) {
                console.log("if-1");
                event.preventDefault();
            }
            if (event.shiftKey == true) {
                console.log("if-3");
                event.preventDefault();
            }
            //rules to make sure the textbox starts with correct number                
            if (event.keyCode != 49 || event.keyCode != 50 || event.keyCode != 97 || event.keyCode != 98) {
                console.log("if-4, Keycode:" + event.keyCode);
                event.preventDefault();
            }
        }
    });

The last if-case is executed to for testing this it is. It is executed as planed but it wont limit the input chars as its built for.

any tips or ideas?

Have you considered RegEx for this problem? I believe you'll get a much cleaner piece of code from it... :) — FarligOpptreden
– FarligOpptreden, Commented Jan 24, 2012 at 7:39
I'd suggest you don't try to make your keydown handler so fancy - you can't restrict the characters at the beginning of the string unless you can tell where the cursor is. Just restrict it to the characters that can appear anywhere in the string and then use a change and/or blur handler to validate the overall format using a regex - this will also allow for when the user pastes, cuts or drag'n'drops (all of which can be done without triggering keydown). — nnnnnn
– nnnnnn, Commented Jan 24, 2012 at 7:40
SSN has 9 digits, even with hyphens the string should not be more then 11 characters. Why is maxNrOfChars set to 12? — Abbas
– Abbas, Commented Jan 24, 2012 at 7:53
Oh, now I know :). Can you provide a few examples of the valid SSNs? Also, wouldn't it be better to check the SSN on the input box's change event rather then every time a key is pressed? — Abbas
– Abbas, Commented Jan 24, 2012 at 8:00
well, you could use the 'change'. But that only occurs after it has been filled. so then it has to be writen for informing the user that 19 or 20 has to be included in the start. An example of an SSN would be 197611238899. — Jonas Lindahl
– Jonas Lindahl, Commented Jan 24, 2012 at 8:26

Jasper · Accepted Answer · 2012-01-26 07:56:07Z

You can use regex to limit the user to only inputting numbers and dashes. Using regex has the advantage that users can more naturally interact with the input, for instance they can paste into the text input and it will be validated successfully:

//bind event handler to the `keyup` event so the value will have been changed
$('.SSNTB').on('keyup', function (event) {

    //get the newly changed value and limit it to numbers and hyphens
    var newValue = this.value.replace(/[^0-9\-]/gi, '');

    //if the new value has changed, meaning invalid characters have been removed, then update the value
    if (this.value != newValue) {
        this.value = newValue;
    }
}).on('blur', function () {

    //run some regex when the user un-focuses the input, this checks for the number ninteen or twenty, then a dash, three numbers, a dash, then four numbers
    if (this.value.search(/[(20)(19)](-)([0-9]{3})(-)([0-9]{4})/gi) == -1) {
        alert('ERROR!');
    } else {
        alert('GOOD GOING!');
    }
});

Here is a demo: http://jsfiddle.net/BRewB/2/

Note that .on() is new in jQuery 1.7 and in this case is the same as using .bind().

Jonas Lindahl · Accepted Answer · 2012-01-26 07:30:23Z

Thought I would post the solution that came to the end. I actually kept the similar code that I posted above and did not covert this it RegExp. What was done was to verify the number after focus on this textbox is lost. It it is incorret the user will be informed and forced to fill in a valid number.

$('input.SSNTB').focusout(function () {
    var ssnNr = $('input.SSNTB').val();
    var ssnNrSub = ssnNr.substring(0, 2);
    //console.log(ssnNrSub);

    //checks for correct lenggth
    if (ssnNr.length < 12) {
        $('div.SSNHelp label.Help').html('SSN to short. Please fill in a complete one with 12 numbers');
        setTimeout(function () {
            $('input.SSNTB').focus();
        }, 0);
        validToSave = false;
        return;
    }

    //checks so it starts correct
    if (ssnNrSub != "19" && ssnNrSub != "20") {
        $('div.SSNHelp label.Help').html('The SSN must start with 19 or 20. Please complete SSN.');
        setTimeout(function () {
            $('input.SSNTB').focus();
        }, 0);
        validToSave = false;
        return;
    }

    $('div.SSNHelp label.Help').html('');
    validToSave = true;
    });

Works for me. : ]

shadyabhi · Accepted Answer · 2012-01-24 07:37:29Z

-1

You have to use regex. Regex is of help in these kind of situations.

Learn more about it from https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp

answered Jan 24, 2012 at 7:37

shadyabhi

17.4k28 gold badges86 silver badges135 bronze badges

1 Comment

Jonas Lindahl Over a year ago

Ok, thanks for the tip, will rewrite this for regex instead see if it works better.

Collectives™ on Stack Overflow

Use JavaScript to allow only specific characters in HTML input

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related