Question

我正在尝试验证我的表单，并且由于某种原因，即使我没有在密码字段的字段中输入任何值，它也始终验证为true。如果我将控件更改为文本，如果我没有在文本框中输入任何内容，验证将起作用。下面是我的代码。我无法弄清楚我在这里做错了什么。

<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/

使用密码字段进行jQuery表单验证

1 个答案: