使用jquery验证插件显示多个控件的单个验证消息

时间:2012-11-21 15:38:43

标签: jquery asp.net jquery-validate

我正在为表单控件使用jquery验证插件。我可以轻松地使用三种不同的消息验证三个单独的控件,并对数字,最小长度,最大长度进行适当的验证。我有像Web引用,出生日期,邮政编码和其他字段,具有多个文本框的控件。下面是用于Web引用的html,

<input name="txtRef1" runat="server" type="text" id="txtRef1" />
<span class="ForwardSlash">-</span>
<input runat="server" name="txtRef2" type="text" id="txtRef2"  />
<span class="ForwardSlash">-</span>
<input runat="server" name="txtRef3" type="text" id="txtRef3"  />

我为此编写了一个自定义验证器方法,检查上述三个文本框中的任何一个是否为空,然后用户将收到一条消息 - “需要字段”。我不想拥有单独的消息,因为它打破了包括表单设计布局在内的设计。实现上述目标的脚本如下:

function setuppagevalidationrecall() {

    $.validator.addMethod('example',

      function (value, element) {

              return ((value != "") && ($('#txtRef2').val() != "") && ($('#txtRef3').val() != ""));

          }, "Field is required");


    var validator = $("#form1").validate({
        rules: {
            txtRef1: {
                example: true,
                number: true,
                minlength: 3,
                maxlength: 3
            }

        }
    });

如何改进此功能以检查数字,最小长度和最大长度,以便对于上面的所有三个文本框,我只获得一条消息 验证消息。并且使示例方法与参数一样动态,以便它可以应用于任何字段,如邮政编码(2个文本框),出生日期(3个文本框,dd / mm / yyyy)

2 个答案:

答案 0 :(得分:1)

为多个控件显示单个验证消息是组的用途。

  

指定错误消息的分组。组由任意组名称作为键和空格组成   分隔的元素名称列表作为值。使用errorPlacement   控制组消息的放置位置。

使用

groups:{ txtRef : "txtRef1 txtRef2 txtRef3" }

errorPlacement: function (error, element) {
                if (element.attr("name") == "txtRef1"
             || element.attr("name") == "txtRef2"
             || element.attr("name") == "txtRef3")
                    error.insertAfter("#txtRef3");
                else
                    error.insertAfter(element);
    }, 

在此尝试:

http://jsfiddle.net/uZYMr/2/

答案 1 :(得分:0)

您可以通过正确使用来自invalidHandler的{​​{1}}和errorPlacement来处理您要执行的操作。无需创建jquery.validate来存储一个全局表单中许多元素的错误消息。

我知道function有时会因为同时发生的所有错误而烦人,但我相信这会对你有帮助。

看一下这个例子:

http://jsfiddle.net/Lrvxk/

正如您所看到的,没有自定义功能或棘手的事情可以让您的工作正常运行。

希望这会有所帮助: - )