提交按钮第二次不调用JQuery验证

Question

在阅读此问题之前，我想告诉大家 @Sparky建议我检查此链接jQuery multiple input name[] validation，但无法在脚本中手动声明18个字段。

我的弹出窗口中至少有18个字段。我仅与3个字段共享该示例。我正在使用jQuery验证，并且正在动态显示字段。我必须设置动态字段的验证，但是验证仅适用于第一个字段，不适用于动态字段。

我在做什么，我有一个记录列表，当管理员单击“添加”按钮时，模型将打开，然后管理员可以填写详细信息。我的验证仅适用于第一个字段。

请检查我的脚本，我认为我的脚本有问题它不是第二次调用该脚本，因为首先，我正在使用

$(document).on('click', '.addexternal', function() { 

然后致电验证

$("#register").validate({

有人可以帮我解决这个问题吗？

我正在使用以下代码。

var isReqInprogress = false;
$(document).on('click', '.addexternal', function() {
  var user_id = $(this).attr("data-id");
  $('#myModal').modal('show');

  $("#register").validate({
    ignore: [],
    rules: {
      "fullname[]": {
        required: true
      },
      "dev[]": {
        required: true
      },
      "details[]": {
        required: {
          depends: function() {
            if (($('.dev').val() == "3")) {
              return true;
            } else {
              return false;
            }

          }
        }
      }

    },
    errorPlacement: function(error, element) {
      if (element.is("select")) {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element);
      }

    },
    submitHandler: function(form) {
      //form.submit();
      if (isReqInprogress) {
        return;
      }
      isReqInprogress = true;

      $.ajax({
        url: "process.php",
        type: "POST",
        dataType: "json",
        data: $('#register').serialize(), //i'll add user_id after some time

        success: function(data) {
          if (data.error == "true") {
            alert("added");
          } else {
            alert("error");
          }

          isReqInprogress = false;
        },
      }); // AJAX Get Jquery statment
    }

  });
});


/*duplicate form fields*/
$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  var count = 2;
  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    //alert("hello");        
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      $(".modal-body").append('<div class="row"> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div class="form-group"> <input type="text" name="fullname[]" class="form-control" placeholder="fullname"> </div></div><div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div class="form-group"> <select name="dev[]" class="form-control dev"> <option disabled="" selected="">Choose</option> <option value="1">Demo1</option> <option value="2">Demo2</option> <option value="3">Demo3</option> </select> </div></div><div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div class="form-group"> <input type="text" name="details[]" class="form-control"> </div></div></div><a href="javascript:void(0)" class="remove_button">Remove</a></div>');
    }
    count++;
  });
  //Once remove button is clicked
  $('.modal-body').on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
  });

});

.modal-dialog {
  max-width: 90% !important;
}

.new_add_bank {
  position: absolute;
  top: -50px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<table class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>id</th>
      <th>fullname</th>
      <th>Dev</th>
      <th>details</th>
      <th>action</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Demo</td>
      <td>Demo1</td>
      <td>dgdfg</td>
      <td><a href="javascript:void(0)" class="addexternal btn btn-primary" data-id="101">Add</a></td>
    </tr>
    <tr>
      <td>2</td>
      <td>xzxc</td>
      <td>Demo2</td>
      <td>mnbvg</td>
      <td><a href="javascript:void(0)" class="addexternal btn btn-primary" data-id="102">Add</a></td>
    </tr>
  </tbody>
</table>

<!-- The Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Popup hading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div id="clicktoadd"><a href="javascript:void(0);" class="btn btn-bg">Add More</a></div>
      <form method="post" action="#" name="register" id="register">
        <!-- Modal body -->
        <div class="modal-body">
          <div class="row">
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
              <div class="form-group">
                <input type="text" name="fullname[]" class="form-control" placeholder="fullname">
              </div>
            </div>

            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
              <div class="form-group">
                <select name="dev[]" class="form-control dev">
                  <option disabled="" selected="">Choose</option>
                  <option value="1">Demo1</option>
                  <option value="2">Demo2</option>
                  <option value="3">Demo3</option>
                </select>
              </div>
            </div>

            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
              <div class="form-group">
                <input type="text" name="details[]" class="form-control">
              </div>
            </div>
          </div>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger">Submit</button>
        </div>
      </form>

    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.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>