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?

Show the code that creates the elements dynamically.

Sparky
– Sparky

2014-03-04 15:59:05 +00:00
Commented Mar 4, 2014 at 15:59 — Sparky
– Sparky, Commented Mar 4, 2014 at 15:59

Sparky · Accepted Answer · 2014-03-05 01:56:49Z

3

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

edited Mar 5, 2014 at 1:56

answered Mar 4, 2014 at 16:06

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adam Carlin Over a year ago

i've tried this and works for the initial ones but any new ones created don't validate. Any ideas why? I'm currently using the code from the link you gave.

Sparky Over a year ago

@adamcarlin, you have to call the rules() method after you create new elements.

fsilva · Accepted Answer · 2018-10-04 20:15:20Z

1

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)

answered Oct 4, 2018 at 20:15

fsilva

4961 gold badge4 silver badges9 bronze badges

Comments

SharkDX · Accepted Answer · 2014-03-04 15:01:21Z

-1

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/

answered Mar 4, 2014 at 15:01

SharkDX

861 gold badge1 silver badge5 bronze badges

Comments

GuyT · Accepted Answer · 2014-03-05 07:25:23Z

-1

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

edited Mar 5, 2014 at 7:25

answered Mar 4, 2014 at 14:59

GuyT

4,4562 gold badges20 silver badges34 bronze badges

3 Comments

Adam Carlin Over a year ago

The id could change because I can add elements that need validating by pressing a button the page.

Sparky Over a year ago

The first half of your answer is technically incorrect. You can only use the name attribute to declare rules inside of the .validate() method. Not id, not class, nor anything else except the name.

GuyT Over a year ago

Damn! I must have misread the documentation. Thanks for your correction! +1

Collectives™ on Stack Overflow

Jquery form validation on input type

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related