javascript / jQuery предотвращает отправку формы, когда на самом деле не используется функция отправки javascript / jQuery

У меня есть страница PHP, которая отправляется сама себе с помощью <form action="" method="post">. У меня выполняется некоторая проверка поля jQuery, и я хочу, чтобы форма не отправлялась, если проверка не проходит. Однако он продолжает отправку, даже если проверка не проходит.

Что мне не хватает? Нужно ли мне на самом деле использовать кнопку (а не отправить) с функцией jQuery .submit(), чтобы предотвратить отправку? (Вот скрипка)

<form action="" method="POST">
    <label for="email">Username: <br />
    <input id="email" name="email" class="phPasswordTxtInputField" type="text" size="33" value=""><br />

    <label for="tmp_password">Temp password:<br />
    <input id="tmp_password" name="tmp_password" type="password"  minlength="5" value="" default="" size="33" caption=""><br />

    <label for="new_password">New password:<br />
    <input id="new_password" name="new_password" type="password"  minlength="5" value="" default="" size="33" caption=""><br />

    <label for="verify_password">Confirm password:<br />
    <input id="verify_password" name="verify_password" type="password"  minlength="5" value="" default="" size="33" caption=""><br />

    <div style="margin: 0px 0px 0px 160px;" id="lblConfirmPasswordMessage"></div>
    <input type="submit" id="submit_password" value="Reset Password" />
</form>

<script>
    function checkPasswordVerify(p,c,objId) {
        if(p != c) {
            var el =  $(objId);
            $(objId).html('<span class="passwordStrength">Please make sure the password and confirmation match.</span>');
            return false;
        }
        return true;
    }

    $('#submit_password').click(function() {
        checkPasswordVerify($(this).val(), $('#new_password').val(), '#lblConfirmPasswordMessage');
    });  
</script>

forms jquery form-submit
person EmmyS    schedule 25.10.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вам понадобится инструкция return в обработчике кликов:

$('#submit_password').click(function() {
    return checkPasswordVerify($(this).val(), $('#new_password').val(), '#lblConfirmPasswordMessage');
});

Кроме того, было бы лучше сделать это в обработчике submit формы, а не в обработчике click кнопки отправки. Формы можно отправлять, не нажимая кнопку отправки.

person Barmar    schedule 25.10.2013
comment
Ack. Я знал, что это что-то простое. Спасибо. - person EmmyS; 26.10.2013
comment
Не волнуйся, ты не первый, ты не последний. - person Barmar; 26.10.2013

arrow_upward
2
arrow_downward

На самом деле вы ничего не делаете с возвращаемым значением checkPasswordVerify. Вы, вероятно, захотите чего-то большего:

$('#submit_password').click(function() {
    return checkPasswordVerify($(this).val(), $('#new_password').val(), '#lblConfirmPasswordMessage');
});

Or:

$('#submit_password').click(function(e) {
    if(!checkPasswordVerify($(this).val(), $('#new_password').val(), '#lblConfirmPasswordMessage'))
       e.preventDefault();
});
person Mike Christensen    schedule 25.10.2013