Which is the best jQuery validation for dynamic field and send data to the process page?

问题

I have one form and I am using jQuery validation. After some research, I found two types of validation with dynamic field til now.

First type: Adding a class and increment the name

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  //var count = 2;
  var numberIncr = 2; // used to increment the name for the inputs
  // var addrm = '';
  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    //Check maximum number of input fields
    if (x < maxField) {
      $(".medication_info").append(' <input type="file" name="workpic[]' + numberIncr + '" class="dynamicVal"><br />');
      x++; //Increment field counter
      numberIncr++;
    }
    // count++;

  });
});

$('#register').on('submit', function(event) {
  event.preventDefault();
  // adding rules for inputs with class 'comment'
  $('.dynamicVal').each(function() {
    $(this).rules("add", {
      required: true
    })
  });
  // test if form is valid 
  if ($('#register').validate().form()) {
    var formData = new FormData(this);
    //console.log([...formData.entries()]);
    $.ajax({
      //url:"process.php",
      url: "process2.php",
      type: "POST",
      dataType: "json",
      data: formData,
      contentType: false,
      cache: false,
      processData: false,

      success: function(data) {
        alert("success");
      },
    }); // AJAX Get Jquery statment
  }
  //alert('hellow');
});

$('#register').validate({
  errorPlacement: function(error, element) {
    if (element.is("select")) {
      error.insertAfter(element.parent());
    } else {
      error.insertAfter(element);
    }

  }
});

<div id="clicktoadd"><a href="javascript:void(0);" class="btn btn-bg">Add More</a></div>
<form action="#" method="post" id="register" name="register" enctype="multipart/form-data">
  <div class="row">
    <div class="medication_info">
      <input type="file" name="workpic[]" class="dynamicVal"><br />
    </div>
  </div>

  <input type="submit" name="send" value="submit">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>

Second type: Name in array

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  //var count = 2;
  var numberIncr = 2; // used to increment the name for the inputs
  // var addrm = '';

  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    //Check maximum number of input fields
    if (x < maxField) {
      $(".medication_info").append(' <input type="file" name="workpic[]" class="dynamicVal"><br />');
      x++; //Increment field counter
      //numberIncr++;
    }
    // count++;

  });


});
$("#register").validate({
  rules: {

    "workpic[]": {
      required: true
    }
  },
  submitHandler: function(form) {
    var formData = new FormData(form);
    $.ajax({
      url: "process.php",
      type: "POST",
      dataType: "json",
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      success: function(data) {
        if (data.error == "true") {
          //$('#thankyoupop').show(); 
          alert("Record Added....");
          location.reload();
        } else {}
        //isReqInprogress = false;
      },
    }); // AJAX Get Jquery statment
  }
});

<div id="clicktoadd"><a href="javascript:void(0);" class="btn btn-bg">Add More</a></div>
<form action="#" method="post" id="register" name="register" enctype="multipart/form-data">
  <div class="row">
    <div class="medication_info">
      <input type="file" name="workpic[]" class="dynamicVal"><br />
    </div>
  </div>

  <input type="submit" name="send" value="submit">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>

In the first scenario, Validation is easily working but not able to get the dynamic data on process.php page.

In the second scenario, You can get data easily but validation is not working on the dynamic field.

Would you help me out which is the best solution for use? Also, can you help me with how to get data in the process page in the first scenario and validation in the second scenario?

This is my PHP code

 foreach($_FILES['workpic']['name'] as $key=>$val){ 
     $fileName = basename($_FILES['workpic']['name'][$key]); 
     print_r($fileName);
            }

Would you help me out in this issue?

来源：https://stackoverflow.com/questions/61883622/which-is-the-best-jquery-validation-for-dynamic-field-and-send-data-to-the-proce