Как сбой формы, если пароли не совпадают?

Question

Я делаю регистрационную форму для отправки в базу данных. Однако есть два ввода пароля, первый - обычный пароль, а другой - подтверждение пароля. Ну, я могу сделать jQuery, чтобы показать, когда пользователь вводит пароль, который не соответствует нормальному паролю, он будет показывать красное предупреждение, например PASSWORD NOT MATCH. Хотя пароли не совпадают, но пользователь может нажать кнопку, чтобы успешно отправить форму в базу данных. Как остановить пользователя от отправки формы, когда пароль не совпадает?

HTML находится здесь.

<form id="myForm" action="registerAction" name="register" method="POST"> 
    <p> <label class="inputField" > Password : </label> </p> 
    <p> <input class="registerField" id="textpwd" name="pwd" required="required" type="password" placeholder="Your password"/> </p> 

    <p> <label class="inputField" > Confirmation Password : </label> </p> 
    <p> <input class="registerField" id="textcfmpwd" name="mpwd" onChange="checkPasswordMatch();"required="required" type="password" placeholder="Confirmation password"/> <span class="warning" id="pwdWarning"> </span> </p> 

    <p> <input class="registerButton" type="submit" value="REGISTER"> </p> 
</form> 

Ну, чтобы показать, как ошибка ПАРОЛЬ НЕ СООТВЕТСТВУЕТ ниже.

function checkPasswordMatch() { 
    var password = $("#textpwd").val(); 
    var confirmPassword = $("#textcfmpwd").val(); 

    if (password != confirmPassword) 
     $("#pwdWarning").html("Passwords do not match!").css('color', 'red'); 
    else 
     $("#pwdWarning").html("Passwords match.").css('color', 'green'); 
} 

$(document).ready(function() { 
    $("#textcfmpwd").keyup(checkPasswordMatch); 
}); 

В заключение, как остановить пользователя от отправки формы, когда пароль не совпадает? Есть идеи?

Answer 1

Вы можете попробовать это

$('#myForm').submit(function(e){ 
    var bool = validatePassword(); 
    if(!bool) 
    e.preventDefault(); // will stop the form from submitting 
    else 
    return true; //continue to submit form 
}); 

Тогда для функции validatePassword

function validatePassword(){ 
    var password = $("#textpwd").val(); 
    var confirmPassword = $("#textcfmpwd").val(); 
    if (password != confirmPassword){ 
     $("#pwdWarning").html("Passwords do not match!").css('color', 'red'); 
     return false; 
     } 
    else{ 
     $("#pwdWarning").html("Passwords match.").css('color', 'green'); 
     return true; 
     } 
    } 

Answer 2

Как на данный момент, вам нужно немного дублирования кода.

$('#myForm').submit(function(evt) { 
    var password = $("#textpwd").val(); 
    var confirmPassword = $("#textcfmpwd").val(); 

    if (password != confirmPassword){ 
     evt.preventDefault(); 
    } 
}); 

Лучшим решением является рефакторинг checkPasswordMatch немного, чтобы он вернуть true или false, и работать с этим.

function passwordsMatch(){ 
    return $('#textpwd').val() == $('#textcfmpwd').val(); 
} 

$(document).ready(function() { 
    $("#textcfmpwd").keyup(function(){ 
     if(!passwordsMatch()){ 
      $("#pwdWarning").html("Passwords do not match!").css('color', 'red'); 
     } else { 
      $("#pwdWarning").html("Passwords match.").css('color', 'green'); 
     } 
    }); 

    $('#myForm').submit(function(evt) { 
     if(!passwordsMatch()){ 
      evt.preventDefault(); 
     } 
    }); 

}); 

Обратите внимание, что это только на стороне клиента сценариев - вы должны делать то же проверки на стороне сервера (PHP/C#/что угодно).