3

I have an HTML form that I'm processing with Perl CGI, like so:

<form action="process.cgi" id="main">
  <input type="text" name="foo" class="required" />
  <input type="text" name="foo" class="required" />
  <input type="text" name="foo" class="required" />
</form>

And I'm validating it with the jQuery Validation plugin. Trouble is, when I call $('#main').valid(), it only checks that the first field is non-empty. How to I get it to check all the fields?

Sparky
  • 98,165
  • 25
  • 199
  • 285
Aurelia Peters
  • 2,169
  • 1
  • 20
  • 34
  • The name attribute is a way to uniquely identify a input element for javascript. You basically override it three times in a row with your current code, hence it won't work. http://www.w3schools.com/tags/att_input_name.asp – Bjoern Rennhak May 20 '13 at 17:13
  • 2
    I don't believe that's correct. While it's true that the 'id' attribute must be unique, it is common practice to give several elements the same name in order to present them as an array to the handling system (in this case, Perl). See http://stackoverflow.com/questions/5518458/does-a-name-attribute-have-to-be-unique-in-a-html-document – Aurelia Peters May 20 '13 at 18:38
  • this is valid html, but jquery validate can't handle multiple elements with same name - some discussion here http://stackoverflow.com/q/931687/678338. If your html can't change then you need to change jquery validate – politus May 20 '13 at 19:04
  • That makes sense, wasn't aware of this feature. Then it seems the jquery plugin doesn't consider this though and just selects the first matching and ignores the rest. – Bjoern Rennhak May 20 '13 at 19:05
  • As @SeanMill stated: Internally, the jQuery Validate plugin requires a unique `name` attribute on all form inputs. Even if the `name` attribute is not used for anything, it still must be present and unique for this plugin to function properly. – Sparky May 20 '13 at 21:09

1 Answers1

2

OFFICIAL DOCUMENTATION:
jqueryvalidation.org/reference/#link-markup-recommendations

"Mandated: A 'name' attribute is required for all input elements needing validation, and the plugin will not work without this. A 'name' attribute must also be unique to the form, as this is how the plugin keeps track of all input elements. However, each group of radio or checkbox elements will share the same 'name' since the value of this grouping represents a single piece of the form data."

<input type="text" name="foo" class="required" />
<input type="text" name="foo" class="required" />
<input type="text" name="foo" class="required" />

Quote OP:

Trouble is, when I call $('#main').valid(), it only checks that the first field is non-empty. How to I get it to check all the fields?

It has nothing specifically to do with .valid() and it will fail the same using other jQuery Validate methods. That's because all three fields have the same name of foo. For this plugin each input must have a unique name.

DEMO: jsfiddle.net/xaFZj/

EDIT:

You cannot have duplicate names while using this plugin. This demo clearly shows that the plugin will fail when the name attribute is duplicated. There is no workaround since the name attribute is how the plugin keeps track of the form elements.

jsfiddle.net/ed3vxgmy/

The only exception is a radio or checkbox group where the elements in each grouping will share the same name.

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • 1
    Is that documented somewhere? – Aurelia Peters May 20 '13 at 21:20
  • 1
    @KitPeters, [See the second paragraph under the MARKUP RECOMMENDATIONS section:](http://docs.jquery.com/Plugins/Validation/Reference) _"The `name` attribute is required for input elements, the validation plugin doesn't work without it."_ Since the plugin requires a `name` attribute to keep track of everything, then logically it would need to be unique name. – Sparky May 20 '13 at 21:40
  • 2
    That makes sense. Pity it won't work for my application; seems like quite a nice piece of SW. – Aurelia Peters May 21 '13 at 15:54
  • Sorry but required doesn't mean unique and this is actually nonsense that it can't work without unique names. There are many applications out there using multiple inputs. For example a language select box. It's obviously a requirement to have the name `languages[]` on all inputs. Please do not stop people from research. – Ozan Kurt Aug 10 '16 at 23:58
  • Sorry @OzanKurt, you are simply wrong and should at least do your own research before making misguided comments and down-voting. You **cannot** have duplicate names on text input fields while using this plugin: http://jsfiddle.net/vqnawogr/ – Sparky Aug 15 '16 at 17:29
  • @OzanKurt, I answered this OP's question by instructing him about this plugin. However, feel free to post an answer that "solves" it with your ideas. – Sparky Aug 15 '16 at 19:26