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

Solution their only works for single array .I cannot find solution for multi-dimensinal array — Kais
– Kais, Commented Jun 10, 2016 at 6:04

Barmar · Accepted Answer · 2016-06-10 06:41:42Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related