jQuery validate with a dynamic number of fields

Question

I have a form with a stage that has a dynamic number of groups of fields, where the number is based upon answers in the previous stage.

I'm generating the fields server-side as an array, i.e.

<input id="foo[0]"...
<input id="bar[0]"...

<input id="foo[1]"...
<input id="bar[1]"...

<input id="foo[2]"...
<input id="bar[2]"... etc

No matter the number, all fields are required & I also need to validate against type & number of digits in some cases. I'm using the jQuery validate plugin for client-side processing (yes, backed up with server-side stuff too) & the validation can't be done inline as the form needs to pass XHTML Strict (EDIT: see my addendum below).

My problem is that I can't work out how to use validate with a dynamic number of fields. Here's what the validate syntax typically looks like for the rest of the form:

$(document).ready(function() {

    // validate stage_form on keyup and submit
    var validator = $("#form_id").validate({

        // rules for field names
        rules: {

            name: "required", 
            address: "required",
            age: { required: true, number: true }

        },

        // inline error messages for fields above
        messages: {

            name: "Please enter your name", 
            address: "Please enter your address",
            age: { required: "Please enter your age", number: "Please enter a number" }

        }

    });

});

Sinan · Accepted Answer · 2009-09-06 18:59:56Z

13

actually it should work If you'd use classes instead of initializing rules as validate() options.

Markup:

<input id="foo[0]" class="required"
<input id="bar[0]" class="required number"

<input id="foo[1]" class="required"
<input id="bar[1]" class="required email"

jQuery:

$(document).ready(function() {

  var validator = $("#form_id").validate({
    messages: {
            name: "Please enter your name", 
            address: "Please enter your address",
            age: { 
               required: "Please enter your age", 
               number: "Please enter a number" 
            }

    }

  });

});

hope this works. Sinan.

answered Sep 6, 2009 at 18:59

Sinan

11.5k7 gold badges39 silver badges48 bronze badges

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

5 Comments

da5id Over a year ago

That's what I ended up doing. See my self-answer.

da5id Over a year ago

And actually I'm going to accept your answer so the question gets closed. Cheers.

Ismael Over a year ago

This makes :rules param useless, and the code less organized. Rules in html and message error in javascript snippet. Unfortunately, unique option.

Chris Krycho Over a year ago

The one downside of this is that it's very difficult to use more complex rules (e.g. depends) using classes.

geoidesic Over a year ago

See my answer for an alternate method that doesn't have any of these downsides.

Serxipc · Accepted Answer · 2009-09-04 15:32:30Z

2

Have you tried to use custom class rules to define the xhtml incompatible rules?

The example in the docs only uses one class, but I suppose you could combine different custom classes to achieve the validation rules you need. I haven't tried this for myself.

answered Sep 4, 2009 at 15:32

Serxipc

6,69910 gold badges43 silver badges51 bronze badges

Comments

da5id · Accepted Answer · 2009-06-28 22:31:12Z

0

No answers so I'll post my "interim" solution, which is to set inline validation rules for 'required' and 'type', leaving 'maxlength' to server-side checking, then display custom messages with an inline title tag.

This is probably good enough for the purposes of this job, but I'm still curious if there's a way to do it 'completely' within jQuery.

answered Jun 28, 2009 at 22:31

da5id

9,1569 gold badges42 silver badges53 bronze badges

Comments

geoidesic · Accepted Answer · 2015-11-20 14:51:35Z

0

Here is another way to do this.

/* Normal validate initialisation. */
$('#myForm').validate({

    /* Use the submitHandler method to add custom-selector-based validation. */
    submitHandler: function(form, ev) {

        /* Find your dynamic field/s. Note that you may want to access them via a scope external to validate, as any selection you do in this internal scope will be static from the form's pre-edit state. */
        var el = $('#selector');

        /* Do your custom validation. */
        if (  el.val() !== 'A'  ) {

            /* Show any errors:- 'fieldname': 'error message'. */
            this.showErrors({
                'name-of-a-field-near-where-you-want-your-error-placed': 'Please enter "A" to continue'
            });

            /* Prevent form submission. */
            return;
        } 
    }
});

answered Nov 20, 2015 at 14:51

geoidesic

5,1435 gold badges45 silver badges61 bronze badges

1 Comment

geoidesic Over a year ago

One downside to this is that it doesn't run at the same time as any defined rules. So your user will get 2-stage validation unless you move all your rules into submitHandler.

Kristian · Accepted Answer · 2012-05-18 16:24:03Z

-2

I found a way to do using "metadata".

This should be used inside a template with a dynamic name. So, i don't need to know the name.

The downside is still not possible to use the code with pure javascript with clean tags.

<script src="jquery.metadata.js" type="text/javascript"></script>

<input validate="{required: true, email: true, messages: { required: 'i'm required', 'i'm not valid e-mail' }}" name="dynamicRow[  myRandomNumber ]"type="text" class="input_normal" />

 $( function() {
     // setup stuff
     $.metadata.setType("attr", "validate"); 
});

edited May 18, 2012 at 16:24

Kristian

22k19 gold badges108 silver badges184 bronze badges

answered Aug 15, 2011 at 19:28

Ismael

2,3401 gold badge25 silver badges37 bronze badges

Collectives™ on Stack Overflow

jQuery validate with a dynamic number of fields

5 Answers 5

5 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related