jQuery validate , how to make validation rules for dynamically generated fields?

Question

I have an HTML form with dynamically add more fields. For example company name. I am trying to use the jQuery validate method to validate. It is working fine with the existing company name field. Here is the code.

<script>
     $("#company_creation_form").validate({ 
            rules:{
                company_name: { 
                    required: true, 
                    minlength: 3 
                }

            },
            submitHandler: function (form) {
             $.ajax({
                 type: "POST",
                 url: "<?php echo BASE_URL;?>crm/thankyou/",
                 data: $(form).serialize()+"&company_count="+company_count,
                 success: function () {
                     alert("thanks");                     
                 }
             });
             return false; // required to block normal submit since you used ajax
         }
     });
</script>

When I click on add more button another company name field will create on the form. The below code is failed to validate the dynamically generated field. Here I am getting the field count globally in this variable company_count

<script>
     $("#company_creation_form").validate({ 
            rules:{
                company_name: { 
                    required: true, 
                    minlength: 3 
                },

I tried like below, but this is giving me error

            if(company_count> 0){
                var new_field = jQuery("#company_name"+company_count);
                new_field : { 
                                required: true, 
                                minlength: 3 
                            },
                        }

The above block code is showing error in the text editor it self

},
submitHandler: function (form) {
             $.ajax({
                 type: "POST",
                 url: "<?php echo BASE_URL;?>crm/thankyou/",
                 data: $(form).serialize()+"&company_count="+company_count,
                 success: function () {
                     alert("thanks");                     
                 }
             });
          return false; // required to block normal submit since you used ajax
         }
     });
</script>

Can anyone help me with how to make validation for these dynamically generated fields? Any help would be greatly appreciated. I am using form submission by using Ajax. Code to add company fields dynamically

var company_room = 0;
var company_room1 = 0;
function add_another_company() {
    company_room++;
    company_room1++;
    var objTo = document.getElementById('company_field')
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "form-group removeclass2" + company_room);
    //var rdiv = 'removeclass2' + company_room;
    divtest.innerHTML = '<div class="form-row"><div class="col-sm-5"> <div class="form-group pad-tp-5"><input type="text" class="form-control aj4" id="company_name" name="company_name" placeholder="Company Name"></div></div><div class="col-sm-2"> <div class="form-group"> <button class="btn btn-danger bdr-rds-100 btn-pad" type="button" onclick="remove_another_company(' + company_room + ');"> <i class="fa fa-minus"></i> </button> </div></div></div>';

    objTo.appendChild(divtest);
    var E_fields = $('.aj4');
    var E_count = 1;
    $.each(E_fields, function() {
        jQuery(this).attr('id','company_name' + E_count);
        jQuery(this).attr('name','company_name' + E_count);
        E_count++;
    });
}

function remove_another_company(rid2) {
        company_room1--;
        $('.removeclass2' + rid2).remove();
        var E_fields = $('.aj4');
        var E_count = 1;
        $.each(E_fields, function() {
            jQuery(this).attr('id','company_name' + E_count);
            jQuery(this).attr('name','company_name' + E_count);
            E_count++;
        });
}

Answer 1

OK, so I didn't have your HTML so I had to mock some up. You will obviously have to tweak this a little to work with your ID's. I tried to keep it as close as possible to the ID's/classes you were already using.

I removed the pure javascript functions and the onclick events in favor of jquery since you were already using it. Hopefully this kind of simplifies things a bit and makes it more manageable.

NOTE: I added a hidden input field to keep track of company count. This way it will be included when you $(form).serialize in your ajax options (as you are adding it with a variable now). I included code to preserve the company_count variable also, so basically you will have 2 company counts. I did this just to show you an easier way to keep track of this without having to micro manage it. :)

Try out this code and let me know what your getting in console if it is not working. Thanks

MOCK HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form-wrapper">
  <p>Dynamic Form</p>
  <button id="addField">Add Dynamic Field</button>
  <form id="dynForm">
    Static Field: <input id="company_name" name="company_name" minlength="3" type="text" value="Static Company Name" required>
    <br>
    <input type="hidden" id="companyCount" name="companyCount" value="1">
    <div id="company_field">

    </div>

  </form>
</div>

JQUERY/JS

$(function() {  // <---- Document Ready!
  $("#addField").on("click", () => {
    var count = parseInt($("#companyCount").val(), 10);
    count += 1;
    $("#companyCount").val(count.toString());
    var thisId = "company_name" + count.toString();
    var html = '<div class="form-row"><div class="col-sm-5"> <div class="form-group pad-tp-5"><input type="text" class="form-control aj4" id="'+thisId+'" name="'+thisId+'" minlength="3" placeholder="Company Name" required></div></div><div class="col-sm-2"> <div class="form-group"> <button class="btn btn-danger bdr-rds-100 btn-pad" type="button"> <i class="fa fa-minus"></i> </button> </div></div></div>';
    var ele = $.parseHTML(html);

    $("#company_field").append(ele);

  });

  $("#company_field").on("click", "button", () => $(this).closest(".form-row").remove());


    $("#company_creation_form").validate({
      submitHandler: function(form) {
        var company_count = parseInt($("#companyCount").val(), 10);
        $.ajax({
          type: "POST",
          url: "<?php echo BASE_URL;?>crm/thankyou/",
          data: $(form).serialize() + "&company_count=" + company_count,
          success: function() {
            alert("thanks");
          }
        });
        return false; 
      }
    });
});