jQuery Validate multiple fields with the same name

Question

I have this form with inputs with the same name but similar (incremental) ids.

I want the form to validate if there is a name on person, the age must be mandatory..

What happens now is that only the first input is mandatory.

Here is my code:

<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
</head>
<body>
    <form id="people">
        <div class="section">
            <input id="person1" name="person" class="person" type="text" placeholder="First Name" />
            <input id="age1" name="age" class="age" type="text" placeholder="Age" />
        </div>
        <div class="section">
            <input id="person2" name="person" class="person" type="text" placeholder="First Name" />
            <input id="age2" name="age" class="age" type="text" placeholder="Age" />
        </div>
        <div class="section">
            <input id="person3" name="person" class="person" type="text" placeholder="First Name" />
            <input id="age3" name="age" class="age" type="text" placeholder="Age" />
        </div>
        ...
        <input type="submit" id="submit" name="submit" value="Add" />
    </form>
    <script type="text/javascript">
        $(function(){
            $('#people').validate();
            $('#submit').click(function(){
                $('[id^="person"]').each(function(){
                    if ($(this).val().length>0){
                        //alert($(this).val());
                        //alert($(this).parent().find('.age').val());
                        $(this).rules('add', {
                            required: true,
                            minlength: 2,
                            messages: {
                                required: "Specify the person name",
                                minlength: "Minimum of 2 characters"
                            }
                        });
                        $(this).parent().find('.age').rules('add', {
                            required: true,
                            number: true,
                            messages: {
                                required: "Must have an age",
                                number: "Specify a valid age"
                            }
                        });
                    }
                });
            });
        });
    </script>
</body>

having multiple textboxes with the same name is probably a bad idea!? — stian.net, Jan 27 '12 at 12:23
I found here in stackoverflow some answers with .each() function but I couldn't make it work.. In the future I would have dynamic number of "rows", so I would prefer to have the same name so I can get them easier in server-side — Francisco Costa, Jan 27 '12 at 12:27
@stian.net - There's no problem repeating input names, in fact it is pretty standard practice for tabular data. It's certainly not what is creating the difficulty in this case. — nnnnnn, Jan 27 '12 at 12:34
@nnnnnn do you have any idea why only the first input is validated? — Francisco Costa, Jan 27 '12 at 13:27
I had the same problem with multiple: . To validate all inputs just set different index number for each file. For example: file[0], file[1], file[2] etc — Osoian Marcel, Aug 04 '17 at 09:06

score 17 · Accepted Answer · edited May 23 '17 at 11:54

17

The jQuery Validator plugin doesn't support multiple fields with the same name out-of-the-box. You'll need to edit the source of the plugin to check the fields the way you want.

See this answer to a similar question for the work-around.

edited May 23 '17 at 11:54

Community

1
1

answered Feb 13 '12 at 01:56

Chris T

186
3

score 0 · Answer 2 · answered Aug 26 '22 at 05:27

I faced this problem, and this code below works for me

$(document).ready(function() {
  var counter = 0;
  $("#addBtn").click(function(){
    var input = "<input type='text' name='person["+counter+"]' required><br/>";
    $(input).appendTo($("#inputType"));
    counter++;
  });

  var myForm = $("#myForm");
  $("#validateBtn").click(function() {
    myForm.validate();
    console.log("is form valid? ",myForm.valid());
  });
});

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <form id="myForm">
      <div id="inputType">
        <!-- new input will appended here-->
      </div>
      <button type="button" id="addBtn">addInput</button>
      <button type="button" id="validateBtn">Validate</button>
    </form>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js"></script>
</body>
</html>

my approached is using array of names and make counter as index. Hope it will helped. Sorry for my bad grammar.

Notes : I knew that this is not what your html like. But this plugin only works when the input name is unique. maybe it will give you another perspective on how to solve this problem.

score -1 · Answer 3 · answered Feb 13 '15 at 19:46

Friends!

In order to validate the text box with the same name use the following it is working fine for me. in addition, No need to declare input parameter as arrays.

Here 'minVal' is the name of the text box. similarly, for dropdown use 'document.getElementsByTagName("select");'

function validateMinimumVal(){
    inp = document.getElementsByTagName("TEXT");
    for ( var i = 0; i < inp.length; ++i )    {
        if (inp[i].name =="minVal" && inp[i].value==''){
            alert('plesae Add a MINIMUM VALUE!!');
                return false;
            }
        }
    return true;
 }

Hope this helps!! Jagan

score -5 · Answer 4 · answered Jan 27 '12 at 12:37

    <div class="section">
        <input id="person1" name="person[]" class="person" type="text" placeholder="First Name" />
        <input id="age1" name="age[]" class="age" type="text" placeholder="Age" />
    </div>
    <div class="section">
        <input id="person2" name="person[]" class="person" type="text" placeholder="First Name" />
        <input id="age2" name="age[]" class="age" type="text" placeholder="Age" />
    </div>
    <div class="section">
       <input id="person3" name="person[]" class="person" type="text" placeholder="First Name" />
       <input id="age3" name="age[]" class="age" type="text" placeholder="Age" />
    </div>

You should add square brackets and loop through the array.

jQuery Validate multiple fields with the same name

4 Answers4

Linked

Related