jquery validate text input array validates first field only [duplicate]

Question

I have array of textbox to collect 5 email address. I have used jQuery validate to validate the form to accept email addresses, unfortunately it's validating the first field only.

Though error message comes up for rest of the fields but it allows the form to submit. I need native solution for this issue.

Here is the code snippet:

$(document).ready(function(){
   $('#myform').validate({
       rules:{
          "foo[]":{
               required:true,
               email:true
                }
       },
       messages:{
          "foo[]":{
               required:"required",
               number:'only numbers!!!'
                }
            }
        });
    });

This is the form:

 <form method="post" action="" id="myform">
        <input type="text" name="foo[]" value="">
        <input type="text" name="foo[]" value="">
        <input type="text" name="foo[]" value="">
        <input type="text" name="foo[]" value="">
        <input type="text" name="foo[]" value="">
        <input type="image" name="bar">
    </form>

name must be unique to the form for the plugin to work correctly. [jqueryvalidation.org/reference/#link-markup-recommendations]. Check out this question to add same rules to multiple fields. — n4m31ess_c0d3r
– n4m31ess_c0d3r, Commented Nov 9, 2017 at 12:04

Death-is-the-real-truth · Accepted Answer · 2017-11-09 16:43:03Z

2

Here is the fix.You can use Jquery each function

$(document).ready(function(){
      $('#myform').validate({ // initialize the plugin
          // other options
      });

            $("[name^=foo]").each(function () {
            $(this).rules("add", {
                required: true,
                email:true,
                messages: {
                     required:"required"
                }
            });
        });
    });

And the form should looks like:

    <form method="post" action="" id="myform">
        <input type="text" name="foo[1]">
        <input type="text" name="foo[2]">
        <input type="text" name="foo[3]">
        <input type="text" name="foo[4]">
        <input type="text" name="foo[5]">
    </form>

edited Nov 9, 2017 at 16:43

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

answered Nov 9, 2017 at 12:25

Ganesan Js

1621 silver badge10 bronze badges

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

1 Comment

Sparky Over a year ago

The most relevant part of this answer is the unique name attribute on each of the text input fields.

Collectives™ on Stack Overflow

jquery validate text input array validates first field only [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related