为什么表单未通过验证？ .validate JQuery 验证

Question

我在表单中使用 jQUERY Validation。碰巧它验证了字段的长度，当将鼠标聚焦在另一个字段中时，或者在书写时。但是，当我按下按钮时，它不会验证字段。我正在使用 AJAX 将我的数据发送到控制器。文档提到应该使用以下行，但这些行不起作用，奇怪的是如果我删除按钮的 id = "btn_insert"，验证它

$("#myform").validate({
 submitHandler: function(form) {
 $(form).ajaxSubmit();
 }
});

表格

  <div class="modal fade" id="insert_modal" name="insert_modal"  role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-md" role="document">
      <div class="modal-content">
        <div class="modal-header bg-blue">
          <h5 class="modal-title text-info" id="myModalLabel">New Type
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body m-3">
         <p>Add a new payment type</p>

          <form id="insert_payment" name="insert_payment">

              <div class="form-group">
                  <label class="control-label">Code</label>
                  <input  type="text"  class="form-control" id="code" name="code" required>
              </div>
              <div class="form-group">
                  <label class=" control-label">Description</label>
                  <input type="text"  class="form-control" id="type" name="type" required>
              </div>
      </div>
    <div class="modal-footer">
          <button type="button" class="btn btn-danger" id="btn_cancel" data-dismiss="modal">Cancelar</button>
          <input class="btn btn-info ml-3" type="submit" value="Insert"  id="btn_insert">
    </div>
   </form>
  </div>
 </div>
</div>

Javascript

jQuery(document).ready(function(){

  $("#insert_payment").validate({

    rules: {
    code: { required: true, minlength: 3},
    type: { required: true, minlength: 5}
    },
    submitHandler: function(form) {
    $(form).ajaxSubmit();
  }

  });
$("#btn_insert").click(function(e){

    e.preventDefault();
    var _form = $("#insert_payment").serialize();
    console.log("form:\n", _form);
    $.ajax({

    url: "<?=base_url();?>payment/insert/", type: 'post', data: _form,
    success: function(response) {
         console.log("response modal new :\n", response);
           $("#insert_modal").modal('hide');
           $("#modal_alert").modal('show');
           $('#tblPayment').DataTable().ajax.reload();
           $("#code").val("");
           $("#type").val("");
       }
    });
});
});

Answer 1

你可以试试这个。

    jQuery(document).ready(function(){
    $("#insert_payment").validate({

          rules: {
              code: { required: true, minlength: 3},
              type: { required: true, minlength: 5}
          },
          submitHandler: function(form) {
              sendData(form);
          }

    });

    var sendData = function(form) {
        var _form = form.serialize();
        console.log("form:\n", _form);
        $.ajax({
           url: "<?=base_url();?>payment/insert/", type: 'post', data: _form,
           success: function(response) {
               console.log("response modal new :\n", response);
               $("#insert_modal").modal('hide');
               $("#modal_alert").modal('show');
               $('#tblPayment').DataTable().ajax.reload();
               $("#code").val("");
               $("#type").val("");
           }
        });
    }
});

Answer 2

我在HTML中添加了要求，像这样：

<input type="text" class="form-control" name="code" minlength="3" required>

这是工作示例代码（包括一些 HTML 修复，例如添加缺失的 </h5>:

function success(response) {
  // ...
}

function submitHandler() {
  var formData = $(this.currentForm).serialize();
  console.log("formData:\n", formData);
  $.post("payment/insert/", formData, success);
  return false; // don't submit form the non-AJAX way
}

$(document).ready(function() {
  $("#insert_payment").validate({
    submitHandler: submitHandler
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="script.js"></script>
<div class="modal-content">
  <form id="insert_payment" name="insert_payment">
    <div class="modal-body m-3">
      <div class="form-group">
        <label class="control-label">Code</label>
        <input type="text" class="form-control" id="code" name="code" minlength="3" required>
      </div>
      <div class="form-group">
        <label class=" control-label">Description</label>
        <input type="text" class="form-control" id="type" name="type" minlength="5" required>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-danger" id="btn_cancel" data-dismiss="modal">Cancelar</button>
      <input class="btn btn-info ml-3" type="submit" value="Insert" id="btn_insert">
    </div>
  </form>
</div>

为什么表单未通过验证？ .validate JQuery 验证

Why is the form not validated? .validate JQuery Validation

javascript

jquery-validate