Jquery Validation Plugin (.validate) is not working in Dynamic Form(loop form)

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",
            }
          }
    });

http://stackoverflow.com/questions/24670447/how-to-validate-array-of-inputs-using-validate-plugin-jquery' — coolguy, Jun 10 '16 at 05:51
Solution their only works for single array .I cannot find solution for multi-dimensinal array — Kais, Jun 10 '16 at 06:04

score 1 · Accepted Answer · answered Jun 10 '16 at 06:41

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
    }
});

Jquery Validation Plugin (.validate) is not working in Dynamic Form(loop form)

1 Answers1