CODEWITHSUNDEEP
jqueryjquery-validate
Francisco Costa
Francisco Costa

Reputation: 7133

jQuery Validate multiple fields with the same name

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>

Upvotes: 13

Views: 43897

Answers (4)

ForFunOnly
ForFunOnly

Reputation: 11

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.

Upvotes: 0

Jagan
Jagan

Reputation: 29

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

Upvotes: -1

Chris T
Chris T

Reputation: 186

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.

Upvotes: 17

sunpietro
sunpietro

Reputation: 2099

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

Upvotes: -5

Related Questions