0

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

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

1 回答 1

3

你有一堆小问题。

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/

于 2013-01-19T16:45:36.760 回答