restrict invalid chars from being typed - jquery-validate

Question

I am using the jquery-validation plugin to validate a simple form. It's working great. Is it possible to restrict the keys from being typed in the textbox completely.

I got this FIDDLE which is somewhat close to what I want.

<form id="myform" method="post" action="">
    <input type="text" id="cstName" name="cstName" />
    <input type="text" id="cntNumber" name="cntNumber" />

    <input type="submit" id="btn" name="btnSubmit" value="Submit" />
</form> 

$.validator.addMethod(
        "regex",
        function (value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(element);

        },
        "Please check your input."
);

$(document).ready(function () {

  $("#myform").validate({    
     rules: {
         cstName: {
             required: true, regex: /^[0-9\.\-\/]+$/
                },
         cntNumber: {
             required: true
           }
      }
  });
});

Here is a simple form created in my MYFIDDLE.

Can the words be restricted from being typed using the jquery-validate plugin. And while it restricts, can the error message still be shown??

Please share you code here so it is preserved for future visitors to SO. — Jay Blanchard, Sep 29 '14 at 18:42
Since you're over-writing the user's ability to input data, there's really no point in also using an input validation plugin. Just create and toggle your own error message. — Sparky, Sep 29 '14 at 20:42

score 1 · Answer 1 · answered Sep 29 '14 at 18:54

1

If you want to disable entering 'invalid' characters entirely, you should add an on key press event listener which returns false when somebody enters a char which does not match your regex. Example:

$('input[name=cntNumber]').on('keypress', function(e) {
    return String.fromCharCode(e.which).match(/[0-9\.\-\/]/) !== null;
});

answered Sep 29 '14 at 18:54

Bjorn

5,272
1
24
35

this blocks the invalid letters from being typed, but no error message appears. Just like how it appears in the default error messages of the plugin. – user2322507 Sep 29 '14 at 19:14
You didn't ask for that in your question, but I guess that isn't too hard. Just call `$('#myform').validate()` in the key press event. – Bjorn Sep 29 '14 at 19:16
could u please demonstrate it? – user2322507 Sep 29 '14 at 19:19
i tried form.validate, but it still doesnt show the warning message – user2322507 Sep 29 '14 at 19:48
Correction Bjorn: `.validate()` is the _initialization_ method. `.valid()` is the _testing_ method. – Sparky Sep 29 '14 at 19:49
@Sparky, i have tried `form.valid` in the key press event. [FIDDLE](http://jsfiddle.net/pez8x63v/2/) here. – user2322507 Sep 29 '14 at 19:54
@user2322507, Validation in your jsFiddle seems to be working properly and I have no idea why you would even need a `keypress` event to fire `.valid()`. By default, the jQuery Validate plugin already fires a validation test on every keystroke (`onkeyup`). – Sparky Sep 29 '14 at 20:05
@Sparky, i want the the invalid letters to be restricted or maybe replaced with an empty string; at the same time show the warning message. Similar to [this](http://jsfiddle.net/lesson8/HkEuf/1/) but maybe used as an `addMethod` function – user2322507 Sep 29 '14 at 20:08
@user2322507, I cannot say how well that would work alongside jQuery Validate. All I can tell you is that validation is already triggered on every keystroke and if you need to manually trigger it, use `.valid()`. – Sparky Sep 29 '14 at 20:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/62138/discussion-between-user2322507-and-sparky). – user2322507 Sep 29 '14 at 20:10

restrict invalid chars from being typed - jquery-validate

1 Answers1