jQuery组验证多个文本框

时间:2013-12-23 12:59:24

标签: jquery jquery-validate

我正在尝试在家庭电话领域实现jQuery验证。目前我的家庭电话领域应包含10位数字。所以我有3个单独的文本框。第一个和第二个文本框每个接受3个数字,而最后一个文本框接受4个数字。目前验证工作正常。但我想要的是所有三个文本框的常见消息。现在,如果我留下1个文本框,错误消息将显示正常,但只要我留下超过1个文本框,错误消息就会重叠。意味着错误消息的数量=文本框的数量。我想在输入家庭电话号码时留下任意数量的文本框只有一条错误消息。代码如下

$("#signup").validate({
        rules: {
            "data[User][homephone1]": {
                required: true,
                number: true,
                minlength: 3,
                maxlength: 3
            },
            "data[User][homephone2]": {
                required: true,
                number: true,
                minlength: 3,
                maxlength: 3
            },
            "data[User][homephone3]": {
                required: true,
                number: true,
                minlength: 4,
                maxlength: 4
            }
        },
        messages: {
            "data[User][homephone1]": {
                required: "Please enter a valid Phone Number",
                number: "",
                minlength: "",
                maxlength: ""
            },
            "data[User][homephone2]": {
                required: "Please enter a valid Phone Number",
                number: "",
                minlength: "",
                maxlength: ""
            },
            "data[User][homephone3]": {
                required: "Please enter a valid Phone Number",
                number: "",
                minlength: "",
                maxlength: ""
            }

有一个group_from属性,但我无法实现它。任何帮助都会非常感激。

1 个答案:

答案 0 :(得分:1)

引用OP:

  

“目前验证工作正常。但我想要的是 a   所有三个文本框的常见消息。现在,如果我离开1   文本框错误消息显示正常但我离开后立即显示   错误消息重叠超过1个文本框。意思是   错误消息数=剩余文本框数。 我只想要一个   输入时左侧任意数量的文本框的错误消息   家庭电话号码。“

     

“有一个group_from属性,但我无法实现它。”

没有group_from选项。但是,groups选项可以执行您想要的操作。它只是将多个字段的所有错误消息合并为一个。

$("#signup").validate({
    rules: {
        "data[User][homephone1]": {
            required: true,
            number: true,
            rangelength: [3, 3]
        },
        "data[User][homephone2]": {
            required: true,
            number: true,
            rangelength: [3, 3]
        },
        "data[User][homephone3]": {
            required: true,
            number: true,
            rangelength: [4, 4]
        }
    },
    messages: {
        "data[User][homephone1]": "Please enter a valid Phone Number",
        "data[User][homephone2]": "Please enter a valid Phone Number",
        "data[User][homephone3]": "Please enter a valid Phone Number"
    },
    groups: {
        phoneGroup: "data[User][homephone1] data[User][homephone2] data[User][homephone3]"
    }
});
  • 群组名称phoneGroup完全是任意的,不会在任何其他地方使用。

  • 您还可以选择在messages选项下指定一个消息每个字段

  • minlengthmaxlength规则可以合并到rangelength规则中。

工作演示:http://jsfiddle.net/JdTZd/