TwelvestoneFront End

jQuery Validate plugin - multidimensional input arrays


Sign in

  • Waiting for Godot ( 730 k posts )
    Just conversation.
  • Thunder Dome ( 23 k posts )
    Photoshop Tennis and Collabs.
  • Photography ( 5.1 k posts )
    For all you shutterbugs, sh...
  • Flash ( 18 k posts )
    ActionScripting to tweens, ...
  • Front End ( 5.9 k posts )
    general front end design an...
  • Back End ( 9.7 k posts )
    serverside scripting, progr...
  • Projects and Theory ( 12 k posts )
    This forum is for discussio...
  • FAQ ( 269 posts )
    All those nagging questions...
  • Design ( 17 k posts )
    graphics & all aspects of g...
  • Purgatory ( 3.6 k posts )
    12stone Jail, feel free to ...
DontBogartMe
 
2011-04-11

I'm creating a form that has groups of repeating input fields, they make up a 2-dimensional array of input fields. I want to validate these to ensure they are digits only (they can be left blank though), and I'm having trouble with Validate in that it only seems to find one in each set. This only works at all because I've patched my plugin code with the code here:

http://web-funda.blogspot.com/2009/05/jquery-validation-for-array-of-input.html#comment-form

So I've made a test HTML page:

http://www.danwashere.com/dev/jquery/multidimensional_arrays/

Here's the JS I'm using to define the rules:

$("form[name=test]").validate( { messages: { "one[0][]" : { digits: "Digits only" }, "two[0][]" : { digits: "Digits only" }, "one[1][]" : { digits: "Digits only" }, "two[1][]" : { digits: "Digits only" }, "one[2][]" : { digits: "Digits only" }, "two[2][]" : { digits: "Digits only" }, }, errorPlacement: function(error, element) { error.insertAfter(element); } });

What can I do to fix this? Is there something I can do to the patch perhaps, to make it read 2-dim arrays? Here's the patch code:

    checkForm: function() {
        this.prepareForm();
        for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
                if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
                        for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
                                this.check( this.findByName( elements[i].name )[cnt] );
                        }
                } else {
                        this.check( elements[i] );
                }
        }
        return this.valid();
},

Or does anyone have a different suggestion, to work around this?

DontBogartMe
 
2011-04-11

HA it never fails, I post to 12S and I work it out myself 5 minutes later, well, worked out a better google search for it is more like it.

Here's the vital clue, in this email from the plugin author: http://groups.google.com/group/jquery-en/browse_thread/thread/c0cf8242ce992ea0/8e7228be4c77a5fc?lnk=raot&pli=1

As long as you can number the fields instead of leaving the square brackets emtpy, you're golden. e.g.

becomes

You also need to number them in the rules definition.

The back end handles it the same way (PHP in this case) and the validator loves it k

Technomancer
 
2011-04-11

The validator plug-in creates a label tag for the input in error. In the absence of an id attribute to associate the label tag with the input field it's using the name attribute - as the name attribute isn't unique on your form, it gets to the first one in error and then stops.

If you add a unique id to each input field, then the validator will apply the label tag correctly and you won't need to explicitly index each of your input fields.

quick example

DontBogartMe
 
2011-04-11

ah thank you, I wondered why it could highlight the right field but mess up with the label.

Numbering the names seems to work ok for me here though.

Sorry, you must be a member to post to a conversation. Either log in or sign up to get involved.
TwelvestoneFront End

jQuery Validate plugin - multidimensional input arrays