jQuery验证插件（.validate）在动态表单（循环表单）中不起作用

Question

I am using the Jquery validation plugin to validate the Dynamic Form.I am getting error messages as wanted but the main problem is whether the required fields are empty or not whatever the condition submit button stills works. I am unable to stop the submit if required fields are empty. Here is the small piece of my code.

HTML:

<form class="pa-form" action="confirmed" method="post" id="my-form">
    <fieldset>
        <?php for($i=1;$i<=3;$i++){ ?>
        <div class="flabel-control">
          <input data-toggle="floatLabel" data-value="" name="myForm[first_name][]" class="firstname form-control" type="text" id="first-name<?=$i?>" required      placeholder="First name" spellcheck="false">
         </div>
        <div class="flabel-control">
          <input data-toggle="floatLabel" data-value="" name="myForm[last_name][]" class="firstname form-control" type="text" id="last-name<?=$i?>" required        placeholder="Last name" spellcheck="false">
         </div>
        <br>
        <?php };?>
           <div class="btn-holder">
            <input type="submit" id="submitBtn" class="btn btn-default text-uppercase" value="Confirm">
        </div>
    </fieldset>
</form>

Js:

$("#my-form").validate({
          validClass: "valid",
          errorClass: "error",
          rules: {
            'myForm[first_name][]': "required",
            'myForm[last_name][]': "required",
          },
          messages: {
            'myForm[first_name][]': "First name is required",
            'myForm[last_name][]': "Last name is required",
            }
          }
    });

Answer 1

jquery-validate requires that each element have a unique name. So put the for loop index into the names.

    <?php for($i=1;$i<=3;$i++){ ?>
    <div class="flabel-control">
      <input data-toggle="floatLabel" data-value="" name="myForm[first_name][<?=$i?>]" class="firstname form-control" type="text" id="first-name<?=$i?>" required placeholder="First name" spellcheck="false">
     </div>
    <div class="flabel-control">
      <input data-toggle="floatLabel" data-value="" name="myForm[last_name][<?=$i?>]" class="firstname form-control" type="text" id="last-name<?=$i?>" required placeholder="Last name" spellcheck="false">
     </div>
    <br>
    <?php };?>

You don't need to list the elements specifically in the rules , because the plugin automatically processes the required attributes in the elements. But if you want to, you can do:

var rules = {}, messages = {};
for (var i = 1; i <= 3; i++) {
    rules['myForm[firstname][' + i + ']'] = 'required';
    messages['myForm[firstname][' + i + ']'] = 'First name is required';
    rules['myForm[lastname][' + i + ']'] = 'required';
    messages['myForm[lastname][' + i + ']'] = 'Last name is required';
}
$("#my-form").validate({
      validClass: "valid",
      errorClass: "error",
      rules: rules,
      messages: messages
    }
});