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

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

0 голосов
/ 19 июня 2019

У меня проблема в том, что это сводит меня с ума.У меня есть модальный с формой, которая проверяется с плагином проверки 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');
    }                     
  });
}

});

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

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

$( "#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="correo@mail.com" 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
    }
?>

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

1 Ответ

0 голосов
/ 19 июня 2019

Попробуйте это в вашем submitHandler 

submitHandler: function( form ) {

  var parametros = $( form ).serialize(); // I change 'this' to form
  console.log(parametros); // for test purpose. See your log to confirm the result data
  $('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');
    }                     
  });
}
...