Question

我有两个选择元素：小时和分钟。如果一个或两个字段留空，我需要出现错误。我一直在使用errorPlacement函数只放置一个错误，但是当你纠正那个字段时，错误消失但其他字段仍然无效。

我已尝试过validator.addMethod的各种组合，但总会出现两个错误都会出现的问题，或者没有错误显示等等。

以前有人遇到过这个问题吗？或者有没有人知道以正确方式检测和处理错误的方法？

提前致谢。

Answer 1

我不确定您的示例中需要哪个字段，但您可能正在寻找jquery验证的依赖关系表达式。例如，如果您只想在小时数值的情况下需要分钟，则可以设置如下验证：

rules: {
    minutes: {
      required: "#hours:filled"
    }
}

如果这不是您想要的逻辑，您很可能必须创建自定义验证方法。这是你想到的逻辑吗？

供参考：

jQuery Validation Dependency Expression

编辑：

这是一个自定义验证器：

jQuery.validator.addMethod("hoursMinutes", function (value, element, param) {
    return $("#hours").val() != "" && $("#minutes").val() != "";
}, "Please enter both hours and minutes.");

validator.settings.rules = {
    hours: { hoursMinutes: true }
}

这将只显示1条错误消息。

编辑＃2：

试试这个。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var validator = $("#form1").validate({
                highlight: function (element, errorClass) {
                    $(element).addClass("invalid");
                },
                unhighlight: function (element, errorClass) {
                    $(element).removeClass("invalid");
                },
                groups: { time: "hours minutes" },
                errorPlacement: function (error, element) {
                    $("#errors").append(error);
                },
                messages: {
                    hours: { required: "Please enter both hours and minutes." },
                    minutes: { required: "Please enter both hours and minutes." }
                },
                showErrors: function (errorMap, errorList) {
                    this.defaultShowErrors();

                    if ($("#hours:filled, #minutes:filled").length == 2) {
                        $("#errors label").hide();
                    }
                    else {
                        $("#errors label").show();
                    }
                }
            });

            $("#submitBtn").click(function () {
                if ($("#form1").valid()) {
                    alert("valid");
                }

                return false;
            });
        });
    </script>
    <style type="text/css">
        .invalid
        {
            border: solid 1px red;
        }
    </style>
</head>
<body>
    <form id="form1" action="" method="post">
    <div id="errors">
    </div>
    <input id="hours" name="hours" type="text" class="required" />
    <input id="minutes" name="minutes" type="text" class="required" />
    <button id="submitBtn">
        Go</button>
    </form>
</body>
</html>

使用jQuery Validator验证两个链接的字段

1 个答案: