Блог

Главная - Вопросы по программированию - Моя кнопка регистрации исчезает при заполнении моего пароля в форме

Моя кнопка регистрации исчезает при заполнении моего пароля в форме

#javascript #forms #validation

#javascript #формы #проверка

Вопрос:

Это вопрос из двух частей.

Часть 1. passConfirm Функция, которая у меня есть в настоящее время, предназначена для проверки соответствия значений пароля и подтверждения пароля. Прямо сейчас, когда я ввожу свой пароль, кнопка исчезает. Целью этой функции является отображение сообщения, когда пользователь создает пароль и подтверждает его, что пароль соответствует или не соответствует. Кто-нибудь знает, почему это происходит, основываясь на имеющемся у меня коде?

Часть 2. Есть ли способ реорганизовать мою passConfirm функцию? Я попытался сделать это, добавив его в validateForm функцию (пожалуйста, смотрите Прокомментированный код для моего примера). Это не сработало.

 function printError(elemId, message) {
  document.getElementById(elemId).innerHTML = message;
}

function validateForm() {
  event.preventDefault();
  var name = document.regForm.FullName.value;
  var email = document.regForm.email.value;
  var phone = document.regForm.phone.value;
  var password = document.regForm.Password.value;
  var confirmPassword = document.regForm.ConfirmPassword.value;
  const phoneno = /^(?([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;

  var nameError = emailError = phoneError = passwordError = true;
  //Empty name input error message
  if (name == "") {
    printError("nameError", "Please enter your name")
  }
  //Empty email input error message
  if (email == "") {
    printError("emailError", "Please enter a valid email")

  }
  //Empty phone input error message
  if (phone == "") {
    printError("phoneError", "Please enter your phone numnber")
  }
  //Non valid phone number error messsage
  if (phone.match(phoneno)) {
    return true;
  } else {
    printError("phoneError", "Please enter a valid phone number")
  }
  //Empty Password input
  if (password == "") {
    printError("passwordError", "Please enter a password")
  }
  //Empty Cofirm Password input
  if (confirmPassword == "") {
    printError("confirmpassError", "Please confirm your password")
  }

  //I tried refactoring the passConfirm function and additing it here. 
  //if (password.match(confirmPassword)) {
  //  printPass("matchingPassword", "Passwords match")
  //  document.getElementById("matchingPassword").style.color = "green";
  //} else {
  //  printPass("matchingPassword", "Passwords do no match")
  //  document.getElementById("matchingPassword").style.color = "red";
  //}
};


var passConfirm = function() {  
  if (document.getElementById("Password").value ==    document.getElementById("ConfirmPassword").value) {   
    document.getElementById("matchingPassword").style.color = "green";   
    document.getElementById("matchingPassword").style.fontWeight = "Heavy";   
    document.getElementById("matchingPassword").innerHTML = "Passwords match!"  
  } else {   
    document.getElementById("matchingPassword").style.color = "red";   
    document.getElementById("matchingPassword").style.fontWeight = "Heavy";   
    document.getElementById("matchingPassword").innerHTML = "Passwords do NOT match!"  
  } 
} 
 fieldset {
  width: 420px;
  height: 950px;
} 
 <h1>Hello, please register!</h1>
<div class="container">
  <form name="regForm" class="form" onsubmit="return validateForm(event)">
    <fieldset>
      <div class="row">
        <label>Full Name</label></br>
        <input name="FullName" type="text" placeholder="John Doe" id="FullName" />
        <span class="error" id="nameError"></span>
      </div>
      <div class="row">
        <label>Email</label></br>
        <input name="email" type="email" placeholder="johndoe@email.com" id="Email" />
        <span class="error" id="emailError"></span>
      </div>
      <div class="row">
        <label>Phone Number</label></br>
        <input name="phone" type="tel" placeholder="(123) 456-7890" id="PhoneNumber" />
        <span class="error" id="phoneError"></span>
      </div>
      <div class="row">
        <label>Password</label></br>
        <input name="Password" id="Password" type="Password" placeholder="Password" onchange='passConfirm();' />
        <span class="error" id="passwordError"></span>
      </div>
      <div class="row">
        <label>Confirm Password</label></br>
        <input name="ConfirmPassword" id="ConfirmPassword" type="Password" placeholder="Confirm Password" onchange='passConfirm();' />
        <span class="error" id="confirmpassError"></span>
      </div>
      <span id="matchingPassword">
              <button type="submit" value="submit">Sign Me Up!</button>
        </fieldset>
    </form>
</div>

Ответ №1:

Ваша кнопка исчезает, потому что вы используете метод innerHTML для отображения сообщения, которое переопределяет его. Хотя ваша логика работает после совпадения паролей при нажатии enter, вы теряете элемент button . Для отображения вашего сообщения лучше использовать отдельный тег div или paragraph, а кнопку оставить как есть, поскольку она является частью формы.

Вот изменение, которое вы можете попробовать

 <span id="matchingPassword">
              <button type="submit" value="submit">Sign Me Up!</button></span>
              <p id="message"></p>
        </fieldset>

var passConfirm = function() {  
  if (document.getElementById("Password").value ==    document.getElementById("ConfirmPassword").value) {   
    document.getElementById("message").style.color = "green";   
    document.getElementById("message").style.fontWeight = "Heavy";   
    document.getElementById("message").innerHTML = "Passwords match!"  
  } else {   
    document.getElementById("message").style.color = "red";   
    document.getElementById("message").style.fontWeight = "Heavy";   
    document.getElementById("message").innerHTML = "Passwords match!"  
  } 
}