Проблемы с проверкой формы JavaScript

Question

Я работаю над системой, которая позволит пользователям изменять свой пароль. Достаточно просто, но он не работает должным образом. Теперь предоставлено, я только начал изучать JavaScript, так что это может быть простая ошибка на моем конце. Кажется, что он игнорирует JavaScript и все равно подчиняется. Если я удалю свой код и просто поставлю return false; в блок функции, он не отправит. Если я верну свой код обратно, он, кажется, проигнорирует то, что я скажу, чтобы он вернулся и отправил.

Прямо сейчас я просто помещаю форму вместе, тогда я обработаю ее базу данных/php после завершения основ. Я хочу, чтобы они ввели свой старый пароль, новый проход и подтвердили новый. После отправки, я хочу, чтобы JavaScript проверял каждое поле, чтобы убедиться, что оно не пусто/пусто, а затем сравните Новый проход/Подтверждение, чтобы убедиться, что они совпадают перед отправкой. Я знаю, что я могу использовать «требуемое» свойство HTML для полей ввода для некоторых из них, и я мог бы сделать ВСЕ это с PHP легко, но, поскольку я изучаю JavaScript, я хотел практиковать этот подход.

Заранее благодарен!

HTML

<form name="frmChangePass" action="UserSettings.php" method="post" onsubmit="return validatePass()"> 
     <span>Change Password</span><br> 

     <input type="password" name="oldPassword" id="oldPassword"> 
     <input type="password" name="newPassword" id="newPassword"> 
     <input type="password" name="confirmPassword" id="confirmPassword"> 
     <div style="display: none" id="passMismatch"></div> 

     <input type="submit" name="submitPass" value="Submit" id="submitPass"> 

    </form> 

JavaScript

<script> 
    function validatePass() { 
     var nP = document.getElementById("newPassword").Value; 
     var cP = document.getElementById("confirmPassword").Value; 
     var oP = document.getElementById("oldPassword").Value; 
     var allowSubmit = false; 

     if (oP == null || oP == "") { 
      document.getElementById("passMismatch").innerHTML = "Please input your current password!"; 
      document.getElementById("passMismatch").style.display = block; 
      allowSubmit = false; 
     } else if (nP == null || nP == "") { 
      document.getElementById("passMismatch").innerHTML = "Please input a new password!"; 
      document.getElementById("passMismatch").style.display = block; 
      allowSubmit = false; 
     } else if (cP == null || cP == "") { 
      document.getElementById("passMismatch").innerHTML = "Please confirm new password!"; 
      document.getElementById("passMismatch").style.display = block; 
      allowSubmit = false; 
     } else if (cP != nP) { 
      document.getElementById("passMismatch").innerHTML = "New password mismatch! Try again."; 
      document.getElementById("passMismatch").style.display = block; 
      allowSubmit = false; 
     } 
     else { 
      document.getElementById("passMismatch").style.display = none; 
      allowSubmit = true; 
     } 

     return allowSubmit; 
    } 
</script> 

Answer 1

Пару вещей, которые я заметил

1. Используйте значение вместо Value
2. Место кавычки вокруг блока и ни

---

<script> 
    function validatePass() { 
     var nP = document.getElementById("newPassword").value; 
     var cP = document.getElementById("confirmPassword").value; 
     var oP = document.getElementById("oldPassword").value; 
     var allowSubmit = false; 

     if (oP == null || oP == "") { 
      document.getElementById("passMismatch").innerHTML = "Please input your current password!"; 
      document.getElementById("passMismatch").style.display = "block"; 
      allowSubmit = false; 
     } else if (nP == null || nP == "") { 
      document.getElementById("passMismatch").innerHTML = "Please input a new password!"; 
      document.getElementById("passMismatch").style.display = "block"; 
      allowSubmit = false; 
     } else if (cP == null || cP == "") { 
      document.getElementById("passMismatch").innerHTML = "Please confirm new password!"; 
      document.getElementById("passMismatch").style.display = "block"; 
      allowSubmit = false; 
     } else if (cP != nP) { 
      document.getElementById("passMismatch").innerHTML = "New password mismatch! Try again."; 
      document.getElementById("passMismatch").style.display = "block"; 
      allowSubmit = false; 
     } 
     else { 
      document.getElementById("passMismatch").style.display = "none"; 
      allowSubmit = true; 
     } 

     return allowSubmit; 
    } 
</script> 

Answer 2

Вы могли бы передать свой form в JavaScript onsubmit обратного вызова, используя ключевое слово this. Это дает вам возможность отправить форму из кода.

Попробуйте это:

<form name="frmChangePass" action="UserSettings.php" method="post" onsubmit="validatePass(this); return false;"> 
    <span>Change Password</span><br> 
    <input type="password" name="oldPassword" id="oldPassword"> 
    <input type="password" name="newPassword" id="newPassword"> 
    <input type="password" name="confirmPassword" id="confirmPassword"> 
    <div style="display: none" id="passMismatch"></div> 
    <input type="submit" name="submitPass" value="Submit" id="submitPass"> 
</form> 

JS:

<script> 
    function validatePass(f) { 
     var nP = document.getElementById("newPassword").value; 
     var cP = document.getElementById("confirmPassword").value; 
     var oP = document.getElementById("oldPassword").value; 
     var allowSubmit = false; 

     if (oP == null || oP == "") { 
      document.getElementById("passMismatch").innerHTML = "Please input your current password!"; 
      document.getElementById("passMismatch").style.display = "block"; 
      allowSubmit = false; 
     } else if (nP == null || nP == "") { 
      document.getElementById("passMismatch").innerHTML = "Please input a new password!"; 
      document.getElementById("passMismatch").style.display = "block"; 
      allowSubmit = false; 
     } else if (cP == null || cP == "") { 
      document.getElementById("passMismatch").innerHTML = "Please confirm new password!"; 
      document.getElementById("passMismatch").style.display = "block"; 
      allowSubmit = false; 
     } else if (cP != nP) { 
      document.getElementById("passMismatch").innerHTML = "New password mismatch! Try again."; 
      document.getElementById("passMismatch").style.display = "block"; 
      allowSubmit = false; 
     } 
     else { 
      document.getElementById("passMismatch").style.display = "none"; 
      allowSubmit = true; 
     } 

     if(allowSubmit) { 
      f.submit(); 
     } 
    } 
</script>