Jquery form validation on input type

Question

I currently have a form which changes dynamically. I'm using all text inputs but they all should only accept numbers.

    $("#result-form").validate({
            rules: {
                .text: {
                required: true,
                digits: true
                }
            },
            messages: {
                .text:{
                required: " Please enter a score!",
                digits: " Please only enter numbers!"
                }
            },
            submitHandler: function(form) {
                form.submit();
            }
        });

Currently i try to validate using the above but that doesn't work. Any ideas?

Answer 1

You cannot do it like this...

$("#result-form").validate({
    rules: {
        .text: {  // <-- MUST only be a NAME attribute
            required: true,
            digits: true
        }
    },
    ....

When declaring your rules using .validate() method, you can only declare them using the name attribute.

---

If you're creating form elements dynamically, rules can only be changed or applied using the .rules('add') method . You would call this immediately after creating the new element and they can be targeted using any jQuery selector you wish.

This code will dynamically apply these rules to all type="text" fields on the page.

$("#result-form").validate({  // initialize plugin
    // other rules and options
});

$('input[type="text"]').each(function() {
    $(this).rules('add', {
        required: true,
        digits: true,
        messages: {
            required: " Please enter a score!",
            digits: " Please only enter numbers!"
        }
    });
});

Working DEMO: http://jsfiddle.net/2U68C/

NOTES :

• You must wrap .rules() in a jQuery .each if/whenever the selector may contain more than one element. If you fail to do this, only the first matched element will be validated.

• You must ensure that all form input elements being considered for validation contain unique name attributes. It's how the plugin keeps track of the inputs. If you fail to do this, only the first matched element will be validated.

---

SIDENOTE :

You don't need this at all...

submitHandler: function(form) {
    form.submit();
} 

This is already the default behavior. In fact, form.submit() is the same code inside the plugin. In other words, you do not need to call the submitHandler in this case. You'd only need to use it if/when you need to over-ride or augment, such as with ajax() .

Answer 2

just to complement @Spark 's answer, if you add

$('input[type="text"]').on('keyup', function(e) {
    $(e.target).valid();
});

you can validate dynamically (in the first time, the input only will be validate after you click out, or focus to some other element)

Answer 3

Use the name instead of the class .

rules: {
   nameoftextbox: {
        required: true,
        digits: true
    }
}

To use it with classes:

jQuery.validator.addClassRules("classname", {
  required: true,
  digits: true
});

Answer 4

You can add the 'required digits' attributes in the input tags, and do:

var validator = $( "#result-form" ).validate();
validator.form();

This will also allow you to choose specifically which of the text boxes are required. For further reading I suggest you read http://jqueryvalidation.org/documentation/