jQuery表单验证与密码字段

Question

我试图验证我的表单，由于某种原因，它总是验证为真，即使我没有在密码字段字段输入任何值。如果我将控件更改为文本，则如果我不在文本框中输入任何内容，则验证工作。下面是我的代码。我不知道我哪里做错了。

<form id="frmChangePassword" action="http://localhost/PatientAccount" method="post">
    <div class="row"><input type="password" id="txtPWD" name="txtPWD" placeholder="" style="" class="text focus" value=""></div>
    <div class="row"><input type="password" id="txtReEnterPWD" name="txtReEnterPWD" placeholder="" style="" class="text" value=""></div>
    <div class="row"><input type="Button" ID="btnChangePassword" Name="btnChangePassword" STYLE="" Class="btn-submit" VALUE="Change Password" onClick="javascript:ValidateResetPassword();"></div>
</form>
<script>
function ValidateResetPassword() {
    $("#frmChangePassword").validate({
        rules: {
            "txtPWD": { required:true },
            "txtReEnterPWD": { required:true }
        },
        messages: {
            "txtPWD": { required: "Please enter Password" },
            "txtReEnterPWD": {required: "Please re-enter password" }
        }
    });
    if ($("#frmChangePassword").valid()) {
        hashPassword();
    }
}
</script>

Answer 1

你有一些小问题。

1)你不需要在提交按钮上使用内联JavaScript来调用Validate插件。这个插件通过它的submitHandler回调函数在内部处理这个问题。

2)提交按钮应该是<input type="submit"。如果你需要它是其他东西，那将需要不同的代码。

3) .validate()函数应该只用于在DOM就绪时"初始化"表单。您错误地将它包含在每次单击按钮时调用的另一个函数中。

4)由于if valid条件只在页面加载时调用一次，并且由于表单在页面加载时总是无效的，因此hashPassword()函数目前从未被调用。如果您希望该函数在表单有效时发生，那么只需将其放入submitHandler:回调函数中。

$(document).ready(function() {
    $("#frmChangePassword").validate({
        rules: {
            "txtPWD": {
                required: true
            },
            "txtReEnterPWD": {
                required: true
            }
        },
        messages: {
            "txtPWD": {
                required: "Please enter Password"
            },
            "txtReEnterPWD": {
                required: "Please re-enter password"
            }
        },
        submitHandler: function (form) { 
            hashPassword();
            form.submit();
            // alert('valid form'); // for demo
            // return false; // for demo
        }
    });
});

工作演示:

http://jsfiddle.net/zgwkR/

插件文档:

http://docs.jquery.com/Plugins/Validation

官方表格样本:

http://jquery.bassistance.de/validate/demo/