Q:

Why is the form not validated? .validate JQuery Validation

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("");
       }
    });
});
});

A:

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>

