Скрипт проверки пароля не вернет false, чтобы предотвратить отправку формы при отправке - PullRequest
Новая
       0

Скрипт проверки пароля не вернет false, чтобы предотвратить отправку формы при отправке

0 голосов
/ 31 октября 2018

У меня действительно странная проблема, и хотя я смотрел несколько других тем, ни одно из опубликованных решений не сработало. В основном у меня есть скрипт, который должен проверять пароль и поле подтверждения пароля, показанное ниже: 

function validatePasswords() {
  var password = document.getElementById("password").value;
  var password_confirm = document.getElementById("confirmPassword").value;
  var retval = true;

  if (password != password_confirm) {
    alert("Your passwords do not match.");
    document.getElementById("password").style.borderColor = "#E34234";
    document.getElementById("confirmPassword").style.borderColor = "#E34234";
    retval = false;
  }
  return retval;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="css/my-style.css">
  <link href="https://fonts.googleapis.com/css?family=Bentham" rel="stylesheet" />
  <link rel="icon" href="/images/icon.png" />
  <script type="text/javascript" src="js/validate_passwords.js" async></script>
  <title>Create Account</title>
</head>

<body>
  <form class="my-itemizedForm" action="createAccount.php" method="post" onsubmit="return validatePasswords()" id="accountForm">
    <br>
    <p class="form-header">
      Enter your information below:
    </p>
    <div align="center">
      <input type="text" id="username" placeholder="EID" maxlength="10" required>
      <br>
      <br>
      <input type="text" id="firstName" placeholder="First Name" minLength="2" maxlength="30" required>
      <br>
      <br>
      <input type="text" id="lastName" placeholder="Last Name" minLength="2" maxlength="30" required>
      <br>
      <br>
      <input type="text" id="phone" placeholder="Phone Number" minlength="10" maxlength="10" required>
      <br>
      <br>
      <input type="text" id="email" placeholder="E-mail" minLength="7" maxlength="40" required>
      <br>
      <br>
      <input type="text" id="password" placeholder="Password" minLength="3" maxlength="40" required>
      <br>
      <br>
      <input type="text" id="confirmPassword" placeholder="Confirm Password" minLength="3" maxlength="40" required>
      <br>
      <br>
      <input class="my-submitButton" type="submit" id="createAccount" value="Create Account">
      <br>
      <br>
    </div>
  </form>
</body>

Я знаю, что мой сценарий правильно связан с документом, так как у меня есть другой сценарий, который при передаче в onsubmit останавливает отправку формы: 

function stop(){
    return false;
}

Почему мой сценарий проверки не работает, учитывая, что stop () работает? Я новичок в javascript и относительно новичок в веб-разработке в целом, так что это может быть простая ошибка, но я просто не могу ее найти.

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Кажется, я понял это, я не совсем уверен, почему это работает сейчас, но проблема была в том, что мне нужно было имя и тег id в полях пароля, например: 

<form class="my-itemizedForm" action="createAccount.php" method="post" onsubmit="return validatePasswords()" id="accountForm">
    <div class="createAccountField">
      <input type="password" id="password" name="password" placeholder="Password" minLength="3" maxlength="40" required>
      <br>
      <br>
      <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm Password" minLength="3" maxlength="40" required>
      <br>
      <br>
    </div>
    <input class="my-submitButton" type="submit" name="createAccount" value="Create Account">
    <br>
    <br>
  </div>
</form>

Это JavaScript, который у меня работает: 

function validatePasswords(){
    var password = document.getElementById("password").value;
    var password_confirm = document.getElementById("confirmPassword").value;

    if(password != password_confirm){
        alert("Your passwords do not match.");
        document.getElementById("password").style.borderColor = "#E34234";
        document.getElementById("confirmPassword").style.borderColor = "#E34234";
        event.preventDefault();
        return false;
    }
    else{
    return true;
    }
}

Если кто-нибудь знает, почему эта реализация работает в отличие от других, мне было бы интересно узнать.

0 голосов
/ 31 октября 2018

Я бы предложил следующие обновления вашего кода, чтобы метод validatePasswords() был привязан к вашему конкретному экземпляру формы через переданный объект event.

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

Наконец, вы также можете использовать метод preventDefault() для объекта event для предотвращения отправки формы в случае неудачной проверки: 

function validatePasswords(event) {

  // Query password inputs via currentTarget (this form)
  var password = event.currentTarget.querySelector(".password").value;
  var password_confirm = event.currentTarget.querySelector(".confirmPassword").value;

  if (password != password_confirm) {
    alert("Your passwords do not match.");
    document.getElementById("password").style.borderColor = "#E34234";
    document.getElementById("confirmPassword").style.borderColor = "#E34234";

    // If validation fails, prevent submit
    event.preventDefault();
  }


}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="css/my-style.css">
  <link href="https://fonts.googleapis.com/css?family=Bentham" rel="stylesheet" />
  <link rel="icon" href="/images/icon.png" />
  <script type="text/javascript" src="js/validate_passwords.js" async></script>
  <title>Create Account</title>
</head>

<body>
  <form class="my-itemizedForm" action="createAccount.php" method="post" onsubmit="validatePasswords(event)" id="accountForm">
    <br>
    <p class="form-header">
      Enter your information below:
    </p>
    <div align="center">
      <input type="text" id="username" placeholder="EID" maxlength="10" required>
      <br>
      <br>
      <input type="text" id="firstName" placeholder="First Name" minLength="2" maxlength="30" required>
      <br>
      <br>
      <input type="text" id="lastName" placeholder="Last Name" minLength="2" maxlength="30" required>
      <br>
      <br>
      <input type="text" id="phone" placeholder="Phone Number" minlength="10" maxlength="10" required>
      <br>
      <br>
      <input type="text" id="email" placeholder="E-mail" minLength="7" maxlength="40" required>
      <br>
      <br>
      <!-- Add class here -->
      <input type="password" id="password" class="password" placeholder="Password" minLength="3" maxlength="40" required>
      <br>
      <br>
      <!-- Add class here -->
      <input type="password" id="confirmPassword" class="confirmPassword" placeholder="Confirm Password" minLength="3" maxlength="40" required>
      <br>
      <br>
      <input class="my-submitButton" type="submit" id="createAccount" value="Create Account">
      <br>
      <br>
    </div>
  </form>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...