同一页面上有多个 YUI 表单验证器答案

【问题标题】：Multiple YUI form validators on the same page同一页面上有多个 YUI 表单验证器
【发布时间】：2015-08-13 20:59:38
【问题描述】：

我在同一页面上有两个表单。我想用一些 YUI 模块来验证这两种形式。我可以通过使用如下模块 aui-form-validator 来根据我的要求验证表单。

YUI().use('aui-form-validator', function(Y) {
        new Y.FormValidator(
          {
                boundingBox: '#form1',
                rules:{
                    answer:{
                        required : true,
                        minLength: 5,
                        maxLength: 600
                    }
                },
                fieldStrings:
                {
                    answer:{
                        required: "Please add the answer",
                        minLength: "Please enter atleast 5 characters",
                        maxLength: "Please enter no more than 600 characters"
                    }
                }
         });

});

上面的代码工作正常，但是当我尝试添加相同的代码集来验证 form2 时，它不起作用。只有先写的那个才有效。

请帮忙。

【问题讨论】：

标签： forms validation yui formvalidation-plugin

【解决方案1】：

如果您还可以提供不起作用的示例，而不仅仅是有效的示例，那将更加有用。

另外我建议添加 AUI 标签，因为您在这里没有使用纯 YUI。

您使用的是哪个版本？

无论如何，我刚刚尝试了以下 sn-p 并且它对我有用：

<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

<form id="form1">
<input name="answer" type="text" value=""> 
<input type="submit" value="SUBMIT">
</form>

<form id="form2">
<input name="answer2" type="text" value=""> 
<input type="submit" value="SUBMIT">
</form>

<script>
YUI().use('aui-form-validator', function(Y) {
        new Y.FormValidator(
          {
                boundingBox: '#form1',
                rules:{
                    answer:{
                        required : true,
                        minLength: 5,
                        maxLength: 600
                    }
                },
                fieldStrings:
                {
                    answer:{
                        required: "Please add the answer",
                        minLength: "Please enter atleast 5 characters",
                        maxLength: "Please enter no more than 600 characters"
                    }
                }
         });


           new Y.FormValidator(
          {
                boundingBox: '#form2',
                rules:{
                    answer2:{
                        required : true,
                        minLength: 5,
                        maxLength: 600
                    }
                },
                fieldStrings:
                {
                    answer2:{
                        required: "Please add the answer2",
                        minLength: "Please enter atleast 5 answer2",
                        maxLength: "Please enter no more than 600 answer2"
                    }
                }
         });

});
</script>

Wdyt?

【讨论】：