不同选项卡中两个表单的JQueryvalidation
我在找到一个很好的解决方案,在两个选项卡上validation两个不同的表单时遇到了一些麻烦。 我希望两者都有效发布数据。 我正在使用标签的引导框架和jqueryvalidation。
这是一个例子: http : //jsfiddle.net/SLsde/
HTML
JS
var form1 = $("#form1").validate({ ignore: '', rules: { "input1": "required" } }); var form2 = $("#form2").validate({ ignore: '', rules: { "input2": "required" } }); $("#form1").submit(function (e) { e.preventDefault(); if (form1.valid() && form2.valid()) { alert("Post Data"); } else { alert("Not Valid"); } }); $("#form2").submit(function (e) { e.preventDefault(); if (form1.valid() && form2.valid()) { alert("Post Data"); } else { alert("Not Valid"); } });
如果您尝试在一个选项卡上提交而另一个选项卡上没有数据,那么它仍然会说它是有效的。 如果你提交为空,那么转到其他标签提交它然后会说错。 我尝试使用忽略:”很多人建议的东西,但我找不到每个标签上的表格的很多例子。
任何想法都会有所帮助。
你的代码:
var form1 = $("#form1").validate({ ... }); .... if (form1.valid() ...
引用OP:
“在一个标签上提交,另一个没有数据,它仍然会说它有效”
这里的问题是你将.valid()
附加到form1
变量,该变量表示.validate()
对象。
根据文档,将.valid()
附加到所选的form
如下所示 …
$("#form1").valid()
如果你试图做一个阶梯forms,有各种方法。
当我创建多步骤表单时,我为每个部分使用一组唯一的
标记。 然后我使用.valid()
方法测试该部分,然后再移动到下一部分。 (不要忘记首先初始化插件;在DOM准备好的所有表单上调用.validate()
。)
然后在最后一节,我在每个表单上使用.serialize()
并将它们连接成一个要提交的数据查询字符串。
这样的东西……
$(document).ready(function() { $('#form1').validate({ // initialize form 1 // rules }); $('#gotoStep2').on('click', function() { // go to step 2 if ($('#form1').valid()) { // code to reveal step 2 and hide step 1 } }); $('#form2').validate({ // initialize form 2 // rules }); $('#gotoStep3').on('click', function() { // go to step 3 if ($('#form2').valid()) { // code to reveal step 3 and hide step 2 } }); $('#form3').validate({ initialize form 3 // rules, submitHandler: function (form) { // serialize and join data for all forms // ajax submit return false; } }); // there is no third click handler since the plugin takes care of this // with the built-in submitHandler callback function on the last form. });
重要的是要记住我上面的click
处理程序没有使用type="submit"
按钮。 这些是常规按钮,可以在 form
标签之外 ,也可以是type="button"
。
只有最后一个表单上的按钮是常规type="submit"
按钮。 那是因为我只在最后一个表单上利用了插件的内置submitHandler
回调函数。
“概念certificate”演示: http : //jsfiddle.net/N9UpD/
另外,请参阅: