JavaScript работает некорректно

ProgramBox

JavaScript работает некорректно

Post author:admin
Запись опубликована:22 февраля, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

У меня есть этот js-код для проверки регистрации, прежде чем пользователь сможет нажать на кнопку отправки. Эта функция активируется onkeyup="validatePassword()" через поле пароля. Для этого требуется, чтобы пользователь заполнил все необходимые поля, прежде чем кнопка отправки будет включена. Но по какой-то причине функция не смогла определить if (pw.lenght < 6) , что я здесь сделал не так?

Некоторое ограничение: я не использую здесь тег form.

 function validatePassword() {
  var firstname = document.getElementById("firstname").value;
  var username = document.getElementById("username").value;
  var email = document.getElementById("email").value;
  var pw = document.getElementById("pw").value;
  var pwMsg = "";
  var msg = "Please fill in the required fields";

  console.log(pw.length);

  if (pw.length < 6) {
    pwMsg = "Password should be between 6 and 8 characters";
    document.getElementById("pwMsg").innerHTML = pwMsg;
    document.getElementById("register-btn").disabled = true;
  } else {
    document.getElementById("register-btn").disabled = false;
  }


  if (firstname == "") {
    document.getElementById("firstname").focus();
    document.getElementById("msg").innerHTML = msg;
    document.getElementById("register-btn").disabled = true;
  } else {
    document.getElementById("register-btn").disabled = false;
  }

  if (username == "") {
    document.getElementById("username").focus();
    document.getElementById("msg").innerHTML = msg;
    document.getElementById("register-btn").disabled = true;
  } else {
    document.getElementById("register-btn").disabled = false;
  }

  if (email == "") {
    document.getElementById("email").focus();
    document.getElementById("msg").innerHTML = msg;
    document.getElementById("register-btn").disabled = true;
  } else {
    document.getElementById("register-btn").disabled = false;
  }
}

 <div class="section">
  <span style="color: red;"><p id="msg" class="center-align"></p></span>
  <div class="input-field col s12 m6">
    <input type="text" name="firstname" class="validate" id="firstname" required>
    <label for="firstname">First Name</label>
    <span id="fname-msg" class="helper-text" data-error="Required"></span>
  </div>
  <div class="input-field col s12 m6">
    <input type="text" name="lastname" class="validate" id="lastname">
    <label for="lastname">Last Name</label>
    <span id="lname-msg" class="helper-text"></span>
  </div>
  <div class="input-field col s12 m6">
    <select name="gender" id="gender">
      <option value="" disabled selected>Select Gender</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
    <label>Gender</label>
  </div>
  <div class="input-field col s12 m6">
    <input type="text" name="username" class="validate" id="username" required>
    <label for="username">Username</label>
    <span id="uname-msg" class="helper-text" data-error="Required"></span>
  </div>
  <div class="input-field col s12 m6">
    <input type="email" name="email" class="validate" id="email" required>
    <label for="email">Email</label>
    <span id="email-msg" class="helper-text" data-error="Invalid Email"></span>
  </div>
  <div class="input-field col s12 m6">
    <input type="password" name="password" class="validate" maxlength="8" id="pw" onkeyup="validatePassword()" required>
    <label for="password">Password</label>
    <span style="color: red;"><p id="pwMsg" class="left-align"></p></span>

    <span style="color: red;"><s:property value="msg" /></span>
  </div>
  <div class="col s12 left-align">
    <p>
      Got an account? Sign in <a href="login">Here</a>
    </p>
  </div>
  <div class="row right-align">
    <a href="home" class="waves-effect waves-light btn-flat red-text">CANCEL</a>
    <a class="waves-effect waves-light btn modal-trigger indigo darken-4" data-target="confirmation" id="register-btn" onClick="transferRegistration()" disabled>REGISTER</a>
  </div>
</div>

1. он распознает, когда pw.length < 6 … он просто не удаляет сообщение, когда pw.length> 5 …. добавьте document.getElementById("pwMsg").innerHTML = ''; еще

2. Но, есть идеи, почему register-btn становится включенным, даже если я установил значение .disabled if pw.length < 6 ?

3. поскольку вы проверяете, является ли firstname действительным, а usename и email …. если email действителен (это последний, который вы проверяете), тогда кнопка включена … т. Е. Состояние кнопки зависит исключительно от действительности электронной почты… у вас должна быть переменная, скажем, disabled=false … затем в каждом из ваших условий if установите disabled = true … не устанавливайте значение false в else … есть ЗАКЛЮЧИТЕЛЬНЫЙ оператор, который в основном выполняет document.getElementById("register-btn").disabled = disabled

4. Да, у меня было слишком много заключительных утверждений. Спасибо, что указали на это!

Ответ №1:

Проблема с кодом заключается в том, что вы разделили функцию проверки на отдельные операторы if-else . Например, у вас есть отдельные операторы if-else для проверки каждого из отдельных полей.

Кроме того, поскольку каждый оператор else, по сути, воздействует на один и тот же элемент HTML, один другой может заменить другой. Я бы предложил удалить ненужные операторы else и изменить некоторые операторы if на оператор ‘else if’

Еще одно изменение, которое я бы предложил, — изменить тег кнопки отправки. измените его с кнопки на кнопку (она должна работать с materialize)

 function validatePassword(){
    var firstname = document.getElementById("firstname").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var pw = document.getElementById("pw").value;
    var pwMsg = "";
    var msg = "Please fill in the required fields"; 

    if (pw.length < 6 ){
        pwMsg = "Password should be between 6 and 8 characters";
        document.getElementById("pwMsg").innerHTML = pwMsg;
        document.getElementById("register-btn").disabled = true;
        console.log("button disabled")
    } else if (firstname == ""){
        document.getElementById("firstname").focus();
        document.getElementById("msg").innerHTML = msg;
        document.getElementById("register-btn").disabled = true;
    } else if (username == ""){
        document.getElementById("username").focus();
        document.getElementById("msg").innerHTML = msg;
        document.getElementById("register-btn").disabled = true;
    }  else if (email == ""){
        document.getElementById("email").focus();
        document.getElementById("msg").innerHTML = msg;
        document.getElementById("register-btn").disabled = true;
    } else {
        document.getElementById("pwMsg").innerHTML = "";
        document.getElementById("register-btn").disabled = false;
    }
}

1. Да, как указал @jaromanda, мне нужно иметь ОКОНЧАТЕЛЬНОЕ утверждение. Ранее я пробовал оператор if else, но это не сработало, поэтому пытался отделить его. Я предполагаю, что мой предыдущий оператор if else также не сделал это правильно. Ваше решение работает! Спасибо