Why is the form not validated? .validate JQuery Validation

Question

I am using jQUERY Validation in a form. It happens that it validates me the length of the fields, when focusing the mouse in another field, or when writing. However, it does not validate the fields when I press the button. I am using AJAX to send my data to the controller. The documentation mentions that the following lines should be used, but these do not work, curiously if I remove the id = "btn_insert" of the button, validate it

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

FORM

  <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

You can try something like this.

    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

I added the requirements in the HTML, like this:

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

Here's working example code (including some HTML fixes, like adding a missing </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>