1

Código PHPEstoy intentando validar un formulario de registro, por un lado con Jquery capturo el botón del formulario y todos los campos para validar que si los campos están vacíos, el formulario no se envíe; para esto hago uso de ** e.preventDefault () **. Pero cuando lleno los campos e intento enviar el formulario, éste no se envía. Mi pregunta es cómo hago para cancelar la acción del preventDefault (), para que una vez, lleno el formulario, se envíen los datos, y por último limpiar el formulario.

También estoy queriendo validar del lado del servidor con PHP, pero no sé como unir ambas validaciones: Jquery y PHP.

Formulario en HTML

 <form action="" method="POST" id="formulario">
                                          <!-- nombre-->
                                          <div class="form-group">
                                           <p id="message"></p> 
                                            <label for="nombre" class="text-dark">Nombre</label>
                                            <input type="text" name ="nombre" class="form-control" value="" placeholder="Ingresa tu nombre">

                                              <div id="nom">
                                               <!--  <?php //if (isset($error_nombre)) { ?>
                                                  <p><?php //echo $error_nombre ?> </p>
                                                // <?php //} ?>  -->
                                              </div>

                                            <label for="apellido" class="text-dark">Apellido</label>
                                            <input type="text" name ="apellido" class="form-control" value="" placeholder="Ingresa tu apellido">

                                             <div id="ape">
                                                 <!-- <?php //if (isset($error_apellido)) { ?>
                                                  <p><?php //echo $error_apellido ?> </p>
                                                <?php //} ?> -->
                                           </div>

                                            <!-- email-->
                                            <label for="email" class="text-dark">Email</label>
                                            <input type="email"  name ="email" class="form-control" value=""aria-describedby="emailHelp" placeholder="Ingresa tu email">

                                             <div id="emailReg">
                                                 <!-- <?php //if (isset($error_email)) { ?>
                                                  <p><?php //echo $error_email ?> </p>
                                                <?php //} ?> -->
                                              </div>

                                          </div>
                                          <!-- password-->
                                          <div class="form-group">
                                            <label for="password" class="text-dark">Contraseña</label>
                                            <input type="password" name="password" class="form-control" value="" placeholder="Ingresa tu contraseña">

                                             <div id="passUsuario">
                                                <!-- <?php //if (isset($error_password)) { ?>
                                                  <p><?php //echo $error_password ?> </p>
                                                <?php //} ?> -->
                                              </div>

                                          
                                          </div>
                                        
                                          <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                                            <button type="submit" name="submit" class="btn btn-primary" id="btn-registro">Enviar</button>
                                          </div>
                                       </form>

**Código Jquery **

$(document).ready(function(){

  $('#btn-registro').on("click", function(e){
    
    let nombre = $("#nombre").val(),
        apellido = $("#apellido").val(),
        email = $("#email").val(),
        password = $("#password").val(),
        datosUsuario = `Nombre: ${nombre} , Apellido: ${apellido}, Email: ${email} , Pass: ${password}`;

     if(!nombre || !apellido || !email || !password ){

         e.preventDefault();


         $('#nom').html('<p style="color: red;">El campo nombre es requerido</p>');

         $('#ape').html('<p style="color: red;">El campo apellido es requerido</p>');

         $('#emailReg').html('<p style="color: red;">El campo email es requerido</p>');

         $('#passUsuario').html('<p style="color: red;">El campo contraseña es requerido</p>');

     
     }
   });
 });
2
  • Hola intentaste hacer submit(); luego de verificar que si esta lleno el formulario? el 25 sep. 2021 a las 22:30
  • Probé hacerlo, y no me funciona, tal vez no lo esté haciendo bien. Me fijé y me olvidé que había borrado los id de cada input, ahora sí me funciona. El problema ahora es que cuando quiero registrar un nuevo usuario, en el formulario me aparece la validación de PHP, es decir, los errores ya escritos, que me indican que los campos están vacíos. el 25 sep. 2021 a las 23:34

1 respuesta 1

0

Para que te funcione correctamente lo que necesitar hacer debes primero

  • ejecutar el e.preventDefault(), esto evitara que el botón haga submit dentro de tu formulario.

  • sacar los valores de cada uno de los input, elementos de tu formulario que necesitas validar con $('').val()

  • una vez validados ejecutar el método de jquery $.ajax(), con el cual enviaras al servidor tus datos del formulario de la siguiente manera

              $.ajax({
                url:'url_del_archivo.php',  /*o también url del controlador depende a donde este apuntando en tu action del formulario*/
                type: 'post',  /*si envia los datos por method='POST'*/
                data: {},  /*data es un objeto clave valor el cual el método ajax de jquery formatea según el type de comunicación GET o POST*/
              }).done(function() {
                 /* Tomas todos los elementos de tu formulario y uno a uno les das */
                 $('.elemento_formulario').val('')
                 ...
              })
    

Cualquier otra duda sobre el código comunícala en los comentarios

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.