'Validate multiple fields with the same name

Here is a part of my HTML:

<div class="editor-field">
    <input id="ImmobilizationLength_1" name="ImmobilizationLength" type="text" value="">
</div>
....
*HTML Code*
....
<div class="editor-field">
    <input id="ImmobilizationLength_2" name="ImmobilizationLength" type="text" value="">
</div>

When I want to validate these fields with jQuery, I add to the rules:

ImmobilizationLength: { required: true, digits: true }

When the form is submitted, only the first the ImmobilizationLength field is validated.

I read on stackoverflow an other question about that, which recommends to use:

$('[name="ImmobilizationLength"]').each(function(){
    $(this).rules("add", { required: true, digits: true } );   
});

But, when I do that, I get this error:

TypeError: Cannot read property 'nodeName' of undefined

How can I do?

jqueryjquery-validate


Solution 1:[1]

you can not have items with the same id selectors will not work also if they have the same name when you post the data will not be correct. unless you use namearray

like 

 name="ImmobilizationLength[]"

for example

<div class="editor-field">
    <input id="input_1"  name="input_1" class="test" type="text" value="">
</div>

Based on the comments once you change the Id you could use starts with selector 

 $('[id^="input_"]').each(...
....
*HTML Code*
....
<div class="editor-field">
       <input id="input_2"  name="input_2" class="test" type="text" value="">
</div>

I would would give them a class and rule based on class name

$.validator.addClassRules({
       test: {
           digits: true,
           required: true
       }
});

Solution 2:[2]

According to W3Schools, ID must be unique:

"The id attribute specifies a unique id for an HTML element. The id must be unique within the HTML document."

http://www.w3schools.com/tags/att_standard_id.asp

Your Javascript will not work as expected since the markup is invalid. When the markup is corrected (by creating unique IDs, and optionally adding a class), you will easily be able to validate your unique fields.

Please note that unlike IDs, classes can be repeated. Names should not be repeated, because the values of each field will overwrite each other if the form is submitted.

EDIT:

The duplicate names are still a problem. If you want to use each(), you will need to use an identifier that can be duplicated, like class. 

$('[name="ImmobilizationLength"]').each(function(){ 
});

will become 

$('.test').each(function(){
});

Solution 3:[3]

Here is how I solved a similar problem I was having. Though instead of validating, I was dynamically setting the values. However the same basic logic can be applied:

function validateFieldValues( fields )
{
    if ( 'length' in fields ) 
    {
        // We got a collection of form fields
        for ( var x = 0; x < fields.length; x++ ) {
            doValidation( fields[x].value );
        }
    }
    else
    {
        // We got a single form field
        doValidation( fields.value );
    }
}

function submitHandler( oForm )
{
    // Get the element collection of <input> elements with the same name
    var someNameElmts = oForm.elements.someName;

    // *should* always exist.  But just in case...
    if ( someNameElmts ) {
        validateFieldValues( someNameElmts );
    } else {
        // deal with it
    }
}

In the HTML:

<form 
method="post" 
name="someForm" 
id="someFormID" 
action="/some/path" 
onsubmit="submitHandler(this);">

Hope that helps!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Varun Achar
Solution 3 Bob FiveThousand

Related Questions