How to implement previously declared jquery.validate rules on dynamically added form fields

Question

I have to clone the certain section of form and have to implement same validation rules defined previously.

As I researched on this issue, almost all them recommended to add new rules again in the newly generated elements. So, I had tried by adding new rule with following code

let $contactItem = $(".contact")
        .first()
        .clone()
        .insertAfter($(".contact").last());
        $contactItem.find("input").each(function(){
        $(this).rules("add", {
     required : true,
     messages : { required : 'field is required.' }
  });
});

But my bad luck, this technique did not solve my issue. So I am looking for another solution for it.

Some details on library I am using:

jQuery v1.9.1
jQuery Validation Plugin v1.17.0

$(document).ready(function() {
  let $validator;
  $("#btnAddNew")
    .off("click")
    .on("click", function() {
     let $contactItem = $(".contact")
        .first()
        .clone()
        .insertAfter($(".contact").last());
    });
  $validator = $("#contactForm").validate({
    rules: {
      firstName: {
        required: true
      },
      lastName: {
        required: true
      }
    },
    messages: {
      firstName: {
        required: "* Required"
      },
      lastName: {
        required: "* Required"
      }
    },
    ignore: ":hidden, :disabled"
  });
  $("#btnSave")
    .off("click")
    .on("click", function() {
      if ($validator.form()) {
        console.log("ok");
      }
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.js"></script>
<div class="container">
    <form id="contactForm">
    <div class="contact">
        <h5 class="card-title">Contact Info</h5>
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="inputEmail4">First Name</label>
                <input type="text" class="form-control" name="firstName" placeholder="Your First Name">
          </div>
                <div class="form-group col-md-6">
                    <label for="inputEmail4">Last Name</label>
                    <input type="text" class="form-control" name="lastName" placeholder="Your Last Name">
    </div>
                </div>
    </div>
                <button type="button" id="btnAddNew" class="btn btn-primary">Add Next</button>
                <button type="button" id="btnSave" class="btn btn-primary">Save</button>
    </form>
</div>

score 2 · Accepted Answer · answered Oct 01 '20 at 05:08

Just adding required to the elements is probably the simplest solution and modify the default message.

I've also commented out an approach for setting class rules.

Note you also need to modify the names in order for them to be unique. I've used very simple incremental logic , modify if you will be adding and removing

$.extend($.validator.messages, {
  required: "* required."
})

// Alternate using class rules
/*jQuery.validator.addClassRules("name-field", {
  required: true
});*/


$(document).ready(function() {
  let $validator;
  $("#btnAddNew")
    .off("click")
    .on("click", function() {
      let $contact = $(".contact");
      let $contactItem = $contact
        .first()
        .clone()
        .insertAfter($(".contact").last());
      // increment input names
      $contactItem.find('input').attr('name', function(_, curr) {
        return curr + $contact.length
      });
    });

  
  $validator = $("#contactForm").validate();


  $("#btnSave")
    .off("click")
    .on("click", function() {
      if ($validator.form()) {
        console.log("ok");
      }
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.js"></script>
<div class="container">
  <form id="contactForm">
    <div class="contact">
      <h5 class="card-title">Contact Info</h5>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputEmail4">First Name</label>
          <input type="text" class="form-control name-field" name="firstName" placeholder="Your First Name" required>
        </div>
        <div class="form-group col-md-6">
          <label for="inputEmail4">Last Name</label>
          <input type="text" class="form-control name-field" name="lastName" placeholder="Your Last Name" required>
        </div>
      </div>
    </div>
    <button type="button" id="btnAddNew" class="btn btn-primary">Add Next</button>
    <button type="button" id="btnSave" class="btn btn-primary">Save</button>
  </form>
</div>

How to implement previously declared jquery.validate rules on dynamically added form fields

1 Answers1