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
– stian.net, Commented Jan 27, 2012 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
– Francisco Costa, Commented Jan 27, 2012 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
– nnnnnn, Commented Jan 27, 2012 at 12:34
@nnnnnn do you have any idea why only the first input is validated? — Francisco Costa
– Francisco Costa, Commented Jan 27, 2012 at 13:27
I had the same problem with multiple: <input type="file" name="file[]">. To validate all inputs just set different index number for each file. For example: file[0], file[1], file[2] etc — Osoian Marcel
– Osoian Marcel, Commented Aug 4, 2017 at 9:06

Community · Accepted Answer · 2017-05-23 11:54:16Z

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, 2017 at 11:54

CommunityBot

11 silver badge

answered Feb 13, 2012 at 1:56

Chris T

1863 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ForFunOnly · Accepted Answer · 2022-08-26 05:27:18Z

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/[email protected]/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.

Jagan · Accepted Answer · 2015-02-13 19:46:38Z

-1

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

answered Feb 13, 2015 at 19:46

Jagan

292 bronze badges

Comments

sunpietro · Accepted Answer · 2012-01-27 12:37:05Z

-5

    <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.

answered Jan 27, 2012 at 12:37

sunpietro

2,0984 gold badges25 silver badges44 bronze badges

Collectives™ on Stack Overflow

jQuery Validate multiple fields with the same name

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related