0

I'm working on a project where the document object model is loaded from jqote templates that use input names with brackets to generate arrays on postback. The project was built this way so the rows could be sortable using jquery sortable prior to postback.

<form id="the_form">
    <input type="text" id="field1" name="options[]" /><br />
    <input type="text" id="field2" name="options[]" /><br />
    <input type="text" id="field3" name="options[]" /><br />
    <input type="submit" value="submit" />
</form>

My problem is that jquery validate does not play nice with the field names that include brackets. Sometimes it validates and sometimes it misses a field or two. I've been reading a lot of other posts stating this should work and I am wondering if I am doing something wrong or if there's a work around.

jQuery("#the_form").validate({
  rules: {
    "options[]": {
      required: true
    }
  }
});

I've created a jsFiddle so others can see what I'm experiencing. If you run the jsFiddle and select Submit in the form, you'll immediately notice it only validates the first field, however if you tab through the fields, you see a different behavior. Thanks!

http://jsfiddle.net/PV6j7/1/

geekinit
  • 1,345
  • 2
  • 14
  • 17
  • 1
    It's not the brackets, it's the fact that they all have the same name. According to [this SO question/answer](http://stackoverflow.com/questions/9033184/jquery-validate-multiple-fields-with-the-same-name), that behavior isn't supported. Edit - There are some workarounds posted [here](http://stackoverflow.com/questions/931687/using-jquery-validate-plugin-to-validate-multiple-form-fields-with-identical-nam) – Jason P Sep 03 '13 at 17:01
  • you may have to modify jquery validation plugin `jquery.validate.js` check this link http://www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements/ – bansi Sep 03 '13 at 17:04
  • 1
    @JasonP, **there is no workaround** and [this answer](http://stackoverflow.com/questions/931687/using-jquery-validate-plugin-to-validate-multiple-form-fields-with-identical-nam) is wrong. The jQuery Validate plugin uses the `name` attribute to keep track of the inputs, so they **must be** unique. – Sparky Sep 03 '13 at 17:21
  • Thanks all! I'm not sure how I can fix this without breaking jquery sortable. At least I know jQuery validate won't work until I give them unique names. – geekinit Sep 03 '13 at 17:27
  • I'm not seeing any particular `name` requirement for jQuery Sortable. How does this break it? – Sparky Sep 03 '13 at 19:31
  • The original array parsed by php was options[0], options[1], etc. I found that if I explicitly created them in order, and then user sorted them, that it really didn't matter because php's foreach kept them in the same order as the document object model. I'm new to using brackets as names. – geekinit Sep 03 '13 at 21:00

3 Answers3

1

That is because they are currently all the same name.

They need to be different names in order to work

Andrew Johnson
  • 446
  • 3
  • 11
1

Quote:

"...My problem is that jquery validate does not play nice with the field names that include brackets."

This is true, but that's easily fixed with quotation marks. However, "brackets" are not really the problem here.

The root problem is that the plugin will not operate properly without a unique name on each field. There is no way around this.

Using a jQuery $.each() to assign rules via the .rules('add') method is discussed elsewhere, but it's been disproved as a viable workaround. That's because the root problem is not with selecting elements & assigning rules; the problem is that the plugin uses the name attribute to keep track of the elements being validated. This is impossible if the name is the same on all.

failed jQuery .each() demo

Sparky
  • 98,165
  • 25
  • 199
  • 285
-1

try this:

  jQuery("#the_form").validate({
  rules: {
    "options": {
      required: true
    }
  }
});
Carlos
  • 228
  • 3
  • 10