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?

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?

• javascript
• jquery
• jquery-validate

• Show the code that creates the elements dynamically. – Sparky Commented Mar 4, 2014 at 15:59

4 Answers 4

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/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().

just to plement @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)

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/documentation/

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
});