Question

我知道附加方法插件允许您在一个组中设置多个表单字段，设置验证组所需的字段数（最重要的是在此实例中）仅显示单个消息错误。

我之前已经完成了它，但即使在这个微不足道的例子中也无法使它正常工作，并且会欣赏指向我错过标记的位置以及我需要更改为仅显示单个错误的内容。

一如既往，非常感谢提前。测试代码如下，或者我有 fiddle 同样的事情。

        <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
        <style type="text/css" media="screen">
            div {float:left;width:110px;}
            input[type=text] {width:100px;}
            #nameError {width:500px;}
            #submitWrapper {clear:both;margin-top:20px;}
        </style>
    </head>
    <body>
        <form name="testForm" id="testForm" method="post" action="">
            <div><input type="text" name="fName" id="fName" class="names22" value="" placeholder="First Name"></div>
            <div><input type="text" name="lName" id="lName" class="names22" value="" placeholder="Last Name"></div>
            <div id="nameError"></div>
            <div id="submitWrapper"><input type="submit" value="Submit"></div>
        </form>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#testForm").validate({
                    groups: {
                        fullName:  "fName,lName"
                    },
                    rules: {
                        fName: {
                            require_from_group: [2, ".names22"]
                        },
                        lName: {
                            require_from_group: [2, ".names22"]
                        }
                    },
                    errorPlacement: function(error, element) {
                        if (element.hasClass("names22")) {
                            error.appendTo("#nameError");
                        }
                    },
                    messages: {
                        fName: {
                            require_from_group: "* Both fields required1"
                        },
                        lName: {
                            require_from_group: "* Both fields required2"
                        }
                    }
                });
            });
        </script>
    </body>
    </html>

Answer 1

我相信您需要从群组部分删除逗号：

groups: {
   fullName:  "fName lName"
},

我还建议将错误消息设为相同：

messages: {
   fName: {
      require_from_group: "* Both fields required"
   },
   lName: {
      require_from_group: "* Both fields required"
   }
}

如果您正在进行进一步验证，您可能需要更新 errorPlacement 部分以专门检测是否在 fullName 上处理错误：

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

jquery附加方法验证的麻烦 - 获取两个消息

1 个答案: