0

Tenia pensado hacer un registro, por pasos, que tuviera 3, todos estos pasos están en un mismo <form> .

He acabado finalmente mi validador de formulario, que esta funcional tal y como yo quería, ahora se me presenta otro problema, y es que al hacer click al botón de submit, aún así dejando los campos vácios, el registro hace fadeOut( cosa que no debería hacer, a no ser que todos los campos tengan valor, y estén validados usando las funciones que he creado)

$(function() {

  var error_username = false;
  var error_password = false;
  var error_password_confirm = false;
  var error_email = false;

  $("#username").focusout(function() {

    check_username();

  });
  $("#password").focusout(function() {

    check_password();

  });
  $("#password-confirm").focusout(function() {

    check_password_confirm();

  });
  $("#email").focusout(function() {

    check_email();

  });

  function check_username() {
    var username_length = $("#username").val().length;

    if (username_length < 3 || username_length > 20) {
      $("input#username").addClass("invalid");
      error_username = true;
    } else {
      $("input#username").removeClass("invalid");
    }
  }

  function check_password() {
    var password_length = $("#password").val().length;

    if (password_length < 6) {
      $("input#password").addClass("invalid");
      error_password = true;
    } else {
      $("input#password").removeClass("invalid");
    }
  }

  function check_password_confirm() {
    var password_confirm_length = $("#password-confirm").val().length;
    var password = $("#password").val();
    var password_confirm = $("#password-confirm").val();

    //if (password_confirm_length < 6)
    //{
    //  $("input#password-confirm").addClass("invalid");
    // error_password_confirm = true;
    //}
    if (password != password_confirm) {
      $("input#password-confirm").addClass("invalid");
      $("input#password").addClass("invalid");
      // msg.... (password doesn't match)
      error_password_confirm = true;
    } else {
      $("input#password-confirm").removeClass("invalid");
      $("input#password").removeClass("invalid");
    }
  }

  function check_email() {
    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);

    if (pattern.test($("#email").val())) {
      $("input#email").removeClass("invalid");
    } else {
      $("input#email").addClass("invalid");
      error_email = true;
    }
  }



  // Aquí deriva el problema que no hace submit correctamente
  $("#submitir").click(function() {

    event.preventDefault();
    var error_username = false;
    var error_password = false;
    var error_password_confirm = false;
    var error_email = false;

    check_username();
    check_password();
    check_password_confirm();
    check_email();

    if (error_username == false && error_password == false && error_password_confirm == false && error_email == false) {
      $("div.primer-step").fadeOut(550, function() {
        $("div.segundo-step").fadeIn(550);
      });
    } else {
      return false;
    }
  });


});
<html>
<div class="primer-step">
  <center>
    <h1>Crear Cuenta</h1>
  </center>

  <form id="register-form" action="" method="post">
    <label for="username">Nombre de usuario:</label>
    <input type="text" id="username"><span class="error-form" id="username-error-message"></span>
    <label for="username">Contraseña:</label>
    <input type="password" id="password">
    <br><br>
    <label for="username">Confirma contraseña :</label>
    <input type="password" id="password-confirm">
    <label for="email">Email:</label>
    <input type="email" id="email">
    <br><br><br>
    <center><input type="submit" value="avanzar a paso 2" id="submitir"></center>
  </form>

</div>
<div class="segundo-step" style="display:none;">
  <h1>Validator completado! :D</h1>
</div>


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

</html>

La verdad que no se por que debe estar petando, ya que a primera vista todo está bien, además esta todo testeado, no debería dejar pasar, si no están los campos validados, en la función de submit, si no valida correctamente, hace un "return false", quizá sea eso que este fallando, lo que yo pretendo con eso es que no deje pasar, simplemente.

Mi formulario, el original tiene muchísimas más líneas, y el controlador más de lo mismo, con lo cual ya está todo programado por la parte back-end con sus modelos, con lo cual hacer más formularios no me sería factible para nada, lo único que me falla es esto.

Gracias y un saludo.

3
  • has checado en la consola del navegador qué error te marca y en qué linea?
    – Sr1871
    Commented el 1 oct. 2019 a las 18:11
  • 1
    Para tu informacion el elemento <center> ha quedado en desuso desde HTML 4
    – anon
    Commented el 1 oct. 2019 a las 20:02
  • Probaste la posible solución?, no se te olvide valorarla
    – anon
    Commented el 2 oct. 2019 a las 16:33

1 respuesta 1

1

El problema es que las variables de error en el controlador de clics en su botón de envío son independientes de las que configuró en las funciones de validación y, por lo tanto, se cumple la condición para el bloque if.

La solución: elimine las vars delante de las variables de error en su controlador de clics.

Te dejo un ejemplo mas detallado de las modificaciones que tendrías que hacer en tu código

$("#submitir").click(function(){ 
  event.preventDefault();
  error_username = false;
  error_password = false;
  error_password_confirm = false;
  error_email = false;

  check_username();
  check_password();
  check_password_confirm();
  check_email();
  console.log(error_username,error_password)
  if (error_username == false && error_password == false && error_password_confirm == false && error_email == false){
    $("div.primer-step").fadeOut(550, function(){
      $("div.segundo-step").fadeIn(550);
    });
  }
else{
    return false;  
  }
}); 

Tu Respuesta

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

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