Проверка jQuery в модальном режиме для отправки данных через php

У меня есть проблема, которая сводит меня с ума. У меня есть модал с формой, которая проверяется с помощью плагина проверки jquery, это работает! но не отправляет данные в php для хранения в базе данных.

Я много читал, но ничто не может решить мою проблему.

Это JS:

$( "#add_cliente" ).validate( {

rules: {
  nomb1_clie: {
    required: true,
    lettersonly: true,
    minlength: 2
  },
  nomb2_clie: {
    lettersonly: true,
    minlength: 2
  },
  apel1_clie: {
    required: true,
    lettersonly: true,
    minlength: 2
  },
  apel2_clie: {
    lettersonly: true,
    minlength: 2
  },
  usuar_clie: {
    required: true,
    minlength: 2
  },
  contr_clie: {
    required: true,
    minlength: 5
  },
  confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#contr_clie"
  },
  telef_clie: {
    required: true,
    number: false,
    minlength: 15
  },
  email_clie: {
    required: true,
    email: true
  },
},

messages: {
  nomb1_clie: {
    required: "Ingrese su Primer Nombre",
    lettersonly: "Tu Nombre solo debe contener letras sin espacios",
    minlength: "Tu Nombre debe contener al menos 2 caracteres"
  },
  nomb2_clie: {
    lettersonly: "Tu Nombre solo debe contener letras sin espacios",
    minlength: "Tu Nombre debe contener al menos 2 caracteres"
  },
  apel1_clie: {
    required: "Ingrese su Primer Apellido",
    lettersonly: "Tu Apellido solo debe contener letras sin espacios",
    minlength: "Tu Apellido debe contener al menos 2 caracteres"
  },
  apel2_clie: {
    lettersonly: "Tu Apellido solo debe contener letras sin espacio",
    minlength: "Tu Apellido debe contener al menos 2 caracteres"
  },
  usuar_clie: {
    required: "Ingrese un Nombre de Usuario",
    minlength: "Tu Nombre de Usuario debe contener al menos 2 caracteres"
  },
  contr_clie: {
    required: "Ingrese una Contraseña",
    minlength: "Tu Contraseña debe contener al menos 5 caracteres"
  },
  confirm_password: {
    required: "Ingrese una Contraseña",
    minlength: "Tu Contraseña debe contener al menos 5 caracteres",
    equalTo: "Ingrese la Misma Contraseña"
  },
  telef_clie: {
    required: "Ingrese un Número de Teléfono Valido",
    number: "Ingrese un Número de Teléfono Valido",
    minlength: "Ingrese un Número de Teléfono Valido"
  },
  email_clie: "Ingrese una Dirección de Correo Electrónico Válida"
},

errorElement: "em",
errorPlacement: function ( error, element ) {
  // Add the `invalid-feedback` class to the error element
  error.addClass( "invalid-feedback" );

  if ( element.prop( "type" ) === "checkbox" ) {
    error.insertAfter( element.next( "label" ) );
  } else {
    error.insertAfter( element );
  }
},
highlight: function ( element, errorClass, validClass ) {
  $( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
},
unhighlight: function (element, errorClass, validClass) {
  $( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
},

submitHandler: function( form ) {

  var parametros = $(this).serialize();
  $('form :input').val('');
  $.ajax({
    type: "POST",
    url: "../ajax/guardar_cliente.php",
    data: parametros,
     beforeSend: function(objeto){
      $("#resultados").html("Enviando...");
      },
    success: function(datos){
    $("#resultados").html(datos);
    load(1);
    $('#addClienteModal').modal('hide');
    }                     
  });
}

});

Я читал об обработчике отправки, но тоже не работает.

Способ, который работает для отправки данных, таков, но таким образом ничего не проверяется:

$( "#add_cliente" ).submit(function( event ) {


var parametros = $(this).serialize();
  $('form :input').val('');
  $.ajax({
      type: "POST",
      url: "../ajax/guardar_cliente.php",
      data: parametros,
       beforeSend: function(objeto){
        $("#resultados").html("Enviando...");
        },
      success: function(datos){
      $("#resultados").html(datos);
      load(1);
      $('#addClienteModal').modal('hide');
      }
  });

  event.preventDefault();

});

Этот способ без валидации работает! но это не то, что я ищу.

А вот и HTML:

<div id = "addClienteModal" class = "modal fade">
<div class = "modal-dialog">
    <div class = "modal-content">
        <form name = "add_cliente" id = "add_cliente" class = "justify-content-center" align = "center" action = "">
            <div class = "modal-header">                      
                <h4 class = "modal-title">Registrar Cliente</h4>
                <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">&times;</button>
            </div>
            <div class = "modal-body">                    
                <div class = "form-row">
      <div class = "col form-group">
        <label class = "form-label" for = "nomb1_clie">Primer Nombre: </label>
        <input type = "text" class = "form-control" name = "nomb1_clie" autocomplete = "off" id = "nomb1_clie" placeholder = "Carlos" maxlength = "20" onkeyup = "this.value = this.value.toUpperCase();" required>
      </div>
      <div class = "col form-group">
        <label class = "form-label" for = "nomb2_clie">Segundo Nombre: </label>
        <input type = "text" class = "form-control" name = "nomb2_clie" autocomplete = "off" id = "nomb2_clie" placeholder = "Agustin" maxlength = "20" onkeyup = "this.value = this.value.toUpperCase();">
      </div>
    </div>
    <div class = "form-row">
      <div class = "col form-group">
        <label class = "form-label" for = "apel1_clie">Primer Apellido: </label>
        <input type = "text" class = "form-control" name = "apel1_clie" autocomplete = "off" id = "apel1_clie" placeholder = "Guanipa" maxlength = "20" onkeyup = "this.value = this.value.toUpperCase();" required>
      </div>
      <div class = "col form-group">
        <label class = "form-label" for = "apel2_clie">Segundo Apellido: </label>
        <input type = "text" class = "form-control" name = "apel2_clie" autocomplete = "off" id = "apel2_clie" placeholder = "Alvarez" maxlength = "20" onkeyup = "this.value = this.value.toUpperCase();">
      </div>
    </div>
    <div class = "form-row">
      <div class = "col form-group">
        <label class = "form-label" for = "gener_clie">Genero: </label>
        <select class = "form-control" id = "gener_clie" name = "gener_clie">
          <option value = "MASCULINO">MASCULINO</option>
          <option value = "FEMENINO">FEMENINO</option>
        </select>
      </div>
    </div>
    <div class = "form-row">
      <div class = "col form-group">
        <label class = "form-label" for = "telef_clie">Telefono: </label>
        <input type = "text" class = "form-control telef-mask" name = "telef_clie" autocomplete = "off" id = "telef_clie" placeholder = "(0000) 000 0000" maxlength = "15">
      </div>
    </div>
    <div class = "form-row">
      <div class = "col form-group">
        <label class = "form-label" for = "email_clie">E-Mail: </label>
        <input type = "email" class = "form-control" name = "email_clie" autocomplete = "off" id = "email_clie" placeholder = "[email protected]" onkeyup = "this.value = this.value.toUpperCase();">
      </div>
    </div>
    <div class = "form-row">
      <div class = "col form-group">
        <label class = "form-label" for = "usuar_clie">Usuario: </label>
        <input type = "text" class = "form-control" name = "usuar_clie" autocomplete = "off" id = "usuar_clie" placeholder = "miusuario" maxlength = "20" onkeyup = "this.value = this.value.toUpperCase();">
      </div>
    </div>
    <div class = "form-row">
      <div class = "col form-group">
        <label class = "form-label" for = "contr_clie">Contraseña: </label>
        <input type = "password" class = "form-control" name = "contr_clie" autocomplete = "off" id = "contr_clie" placeholder = "********" maxlength = "20">
      </div>
      <div class = "col form-group">
        <label class = "form-label" for = "confirm_password">Confirmar Contraseña: </label>
        <input type = "password" class = "form-control" name = "confirm_password" autocomplete = "off" id = "confirm_password" placeholder = "********" maxlength = "20">
      </div>
    </div>  
            </div>
            <div class = "modal-footer">
                <input type = "button" class = "btn btn-light" data-dismiss = "modal" value = "Cancelar">
                <input type = "submit" class = "btn btn-primary" value = "Registrar">
            </div>
        </form>
    </div>
</div>

И PHP для сохранения данных

<?php

require_once ("../paginas/conexion_bd.php"); //Contiene Funcion que Conecta a la Base de Datos



// escaping, additionally removing everything that could be (html/javascript-) code
  $nomb1_clie = mysqli_real_escape_string($con,(strip_tags($_POST["nomb1_clie"],ENT_QUOTES)));
  $nomb2_clie = mysqli_real_escape_string($con,(strip_tags($_POST["nomb2_clie"],ENT_QUOTES)));
  $apel1_clie = mysqli_real_escape_string($con,(strip_tags($_POST["apel1_clie"],ENT_QUOTES)));
  $apel2_clie = mysqli_real_escape_string($con,(strip_tags($_POST["apel2_clie"],ENT_QUOTES)));
  $gener_clie = mysqli_real_escape_string($con,(strip_tags($_POST["gener_clie"],ENT_QUOTES)));
  $telef_clie = mysqli_real_escape_string($con,(strip_tags($_POST["telef_clie"],ENT_QUOTES)));
  $email_clie = mysqli_real_escape_string($con,(strip_tags($_POST["email_clie"],ENT_QUOTES)));
  $usuar_clie = mysqli_real_escape_string($con,(strip_tags($_POST["usuar_clie"],ENT_QUOTES)));
  $contr_clie = mysqli_real_escape_string($con,(strip_tags($_POST["contr_clie"],ENT_QUOTES)));
  $fecre_clie = date('Y-m-d', $timestamp = time());
    $statu_clie = 1;

    // Registrar en la Base de Datos
    $sql = "INSERT INTO tabma_clie(nomb1_clie, nomb2_clie, apel1_clie, apel2_clie, gener_clie, telef_clie, email_clie, usuar_clie, contr_clie, fecre_clie, statu_clie) VALUES ('$nomb1_clie','$nomb2_clie','$apel1_clie','$apel2_clie','$gener_clie','$telef_clie','$email_clie','$usuar_clie','$contr_clie','$fecre_clie','$statu_clie')";

    $query = mysqli_query($con,$sql);
    // Si ha sido Agregado Exitosamentee
    if ($query) {
        $messages[] = "El cliente ha sido registrado con éxito.";
    } else {
        $errors[] = "Lo sentimos, el registro falló. Por favor, regrese y vuelva a intentarlo.";
    }


if (isset($errors)){        
    ?>
    <div class = "alert alert-danger" role = "alert">
        <button type = "button" class = "close" data-dismiss = "alert">&times;</button>
            <strong>Error!</strong> 
            <?php
                foreach ($errors as $error) {
                        echo $error;
                    }
                ?>
    </div>
    <?php
    }
    if (isset($messages)){
        ?>
        <div class = "alert alert-success" role = "alert">
                <button type = "button" class = "close" data-dismiss = "alert">&times;</button>
                <strong>¡Bien hecho!</strong>
                <?php
                    foreach ($messages as $message) {
                            echo $message;
                        }
                    ?>
        </div>
        <?php
    }
?>          

Я пытаюсь понять это, читая и ища, но не вижу ошибки или способа сделать это правильно. Надеюсь, кто-нибудь там может мне помочь! Кстати, спасибо!