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

我有两个选择元素：小时和分钟。如果一个或两个字段留空，我需要出现错误。我一直在使用errorPlacement函数来放置一个错误，但是当你纠正这个错误时，错误消失，但另一个字段仍然无效。使用jQuery验证器验证两个链接的字段

我已经试过validator.addMethod的各种组合，但总有一些问题，其中两个错误都将显示，或没有错误将显示等

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

在此先感谢。

2012-01-18 Dean James

我不确定在您的示例中需要哪个字段，但您可能正在寻找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>

来源

2012-01-18 14:12:03

不，这会设置两种不同的方法来显示两个不同的错误。需要填写小时和分钟字段。如果两个或其中一个留空，则应出现一个，但突出显示这两个字段。当用户更正一个字段时，突出显示应该被删除，但是由于其他字段仍然无效，错误应该保留。 – 2012-01-18 14:36:35

我编辑了我的答案与另一个可能的解决方案。 – 2012-01-18 14:58:11

感谢您的帮助。在上述自定义方法中，分钟字段未经验证。如果我要在validator.settings.rules中添加分钟规则，那么错误将显示两次。这是主要问题。 – 2012-01-19 09:22:26

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

回答

相关问题