Как решить небольшую проблему проверки (она практически закончена, за исключением небольшой детали ..) - PullRequest
Новая
       11

Как решить небольшую проблему проверки (она практически закончена, за исключением небольшой детали ..)

0 голосов
/ 01 октября 2019

Я планировал сделать запись, шаг за шагом, что у меня было 3, все эти шаги в одном <form>.

Я наконец закончил мой валидатор формы, которыйфункционально, как я хотел, теперь у меня есть другая проблема, и это то, что когда я нажимаю на кнопку отправки, оставляя поля пустыми, регистрация делает fadeOut (что не должно делать, если все поля не имеют значения, ипроверено с использованием созданных мной функций) 

$(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>

Правда в том, что я не знаю, почему это должно быть шелушение, так как на первый взгляд все хорошо, кроме того, что все проверено, я не должен позволятьpass, если поля не проверены, в функции submit, если она не проверяется корректно, она возвращает «false», возможно, это то, что не удается, и я собираюсь сказать, что это не такпросто передать.

Моя форма, оригинал имеет гораздо больше строк, а контроллер - больше того же самого, с помощью которого все уже запрограммировано серверной частью с ее моделями, что делает больше формбыло бы неосуществимо для меня, единственное, что меня подводит, это следующее.

1 Ответ

0 голосов
/ 01 октября 2019

Проблема в том, что переменные ошибок в обработчике кликов на кнопке отправки не зависят от тех, которые вы установили в функциях проверки, и, следовательно, выполняется условие для блока if.

Решение: удалите var s перед переменными ошибки в вашем обработчике кликов.

...