using regex to validate input in jquery

Question

i have a function that accepts only integer inputs from a textbox. after calling the parseInt method on it, it still accepts integers with strings after it. i'm wondering how to implement a regex to filter out inputs that contain string. here is my code.

var validate = function() {
    $("#newgame").click(function() {
        $("label").text("What's your guess.");
        $("#guess").val("");
    })
    $("#submitguess").click(function() {
        initguess = parseInt($("#guess").val(), 10);
        if ( isNaN(initguess) || initguess > 100 || initguess < 0 || typeof initguess === "string") {

            $("label").text("Enter a valid format.");

        }

        else {

            if (initguess === number) {
                $("label").text("Waoh! You guessed right.");
                $("#submitguess").hide("slow");
                // displaybar(diff);
            }
            else {
                $("label").text("You are getting hot.");
                // displaybar(diff);
                feedback(initguess);
            }   
        }
        // var diff = (100 - Math.abs(number - initguess));
        // displaybar(diff);
    });
}

why not to ignore the string literals on input? e.g if i press "a" it ignores it, but 0-9 is fine ;) — Holybreath, Sep 10 '14 at 11:43
^[1-9][0-9]?$|^100$ from http://stackoverflow.com/questions/13473523/regex-number-between-1-and-100 — Alexander Haas, Sep 10 '14 at 11:48

score 0 · Answer 1 · answered Sep 10 '14 at 11:47

0

consider on this example: http://jsbin.com/foyuve/1/

// text field
var test = $.trim( $('#test').val() );

// check for only integer values
if( (/^[0-9]+[0-9]$/).test(test) ) {
   alert('int');
}

answered Sep 10 '14 at 11:47

jogesh_pi

9,762
4
37
65

score 0 · Answer 2 · answered Sep 10 '14 at 11:53

Agree with previous comment. It's easy to hook into the keypress event to prevent non-numeric characters from being entered in the first place, and you don't need regex necessarily. Example function:

function numericOnly(e) {
    var ev = e ? e : window.event;
    var code = ev.which || ev.keyCode; 
    if (ev.shiftKey) {
        return false;
    }        
    return ((code >= 48 && code <= 57) || code == 8 || code == 16 || code == 9 || code == 37 || code == 35 || code == 36);  //also allow backspace, delete, tab, right and left arrows, home, end
}

}

In your input, add this attribute:

onkeypress="return numericOnly(event)"

It's also a good idea to validate input on the server as a precautionary measure.

score 0 · Answer 3 · answered Sep 10 '14 at 12:03

On your input field that needs to be numbers only you can do something like this.

html

 <input type="text" class="validateNumber">

jQuery

 $(".validateNumber").on('keydown keyup click blue change', function (e) {
    // Allow: backspace, delete, tab, escape, enter, space and , 
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 188, 32]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

Martin Ernst · Accepted Answer · 2014-09-10T12:39:29.017

Credits to @Holybreath, he points in the right direction. Inside the 'click'-function attached to #submitguess you made one mistake.

In first line you you do a parseInt() on the value. Result: the string "77" is converted to number 77. After that in the second line you do a check for initguessbeing a number. Of course it is, you yourself has made it a number!

You can simplify your code as follows:

var validate = function() {
    $("#newgame").click(function() {
        $("label").text("What's your guess.");
        $("#guess").val("");
    })
    $("#submitguess").click(function() {
        initguess = $("#guess").val(); // get the vaue
        // check if initguess is not a number or not an integer between 0 and 100
        if (typeof initguess !== 'number' || !(/^[1-9]\d?$/.test(initguess))) {
            $("label").text("Enter a valid format."); // output the error-message
            return; // return at this point prevents all following code from being executed
        } // so you don't need the next 'else' statement anymore

        if (initguess === number) {
            $("label").text("Waoh! You guessed right.");
            $("#submitguess").hide("slow");
            // displaybar(diff);
        }
        else {
            $("label").text("You are getting hot.");
            // displaybar(diff);
            feedback(initguess);
        }   
        // var diff = (100 - Math.abs(number - initguess));
        // displaybar(diff);
    });
}

thanks alot it work...other suggestions were helpful, but i needed to implement a regex in the condition and you killed it. — dejijaye, Sep 10 '14 at 13:42

using regex to validate input in jquery

4 Answers4