如何使用JQuery Validation Plugin进行条件成功检查？
我正在尝试使用JQuery Validation插件，但我遇到了一个小问题。 我的表单使用以下方法隐藏/显示所需内容：
...Page 1 form content... ...Page 2 form content... 表格有两页……这是第1页上的按钮，允许用户继续。
showLayer（）函数只是切换传递元素的可见性。 唯一需要validation的内容是第1页，此按钮位于此处。 我想要做的是先使用Continue按钮调用.validate（）然后成功validation后再进入第二页。 研究表明，让onClick调用多个函数是一件容易的事情：
虽然这在“技术上”起作用，但是用户发现他自己正在查看第2页内容而不知道他/她在第1页上呈现validation错误，除非他们点击“返回”按钮。 显然不是一个非常有用的情况！
我试过这个，但仍面临同样的基本问题。
function formValidate() { .validate(); showLayer('page2'); }
假设所有validation都通过，则需要确定validationfunction是否成功返回，然后有条件地继续到第2页。 在研究了插件文档后，我发现以下内容是我最有可能（我认为 ）实现此目的的候选者：
"invalidHandler" $(".selector").validate({ invalidHandler: function(event, validator) { var errors = validator.numberOfInvalids(); if (errors) { var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You missed ' + errors + ' fields. They have been highlighted'; $("div.error span").html(message); $("div.error").show(); } else { $("div.error").hide(); } } });
…但我不知道如何将它与所需的条件检查联系在一起。 我不需要像示例所示显示错误计数，但它似乎做了正确的回调，错误计数（我认为 ）提供了成功检查的基础和条件的框架。 我可能正在咆哮错误的树，可能有更好的方法来实现这个…任何想法？ 所有人都非常感谢！
更新* ** * ** * ** * ** * ** JSFiddle http://jsfiddle.net/uEh3a/不确定我是否做得对…第一次！
在我从Sparky添加代码之前，表单根据所选的单选按钮执行了一些自动计算。 代码添加后没有计算，不能在表单之间移动。 我确定我做了一些愚蠢的事情……任何人都能看到什么？
有很多方法可以做到这一点，但下面的演示也包含了你的问题的很大一部分答案，即使用.valid()方法以编程方式测试表单。 您可以全部或部分使用我的示例。
当我创建多步骤表单时，我为每个部分使用一组唯一的
标记。 然后我使用.valid()方法测试该部分，然后再移动到下一部分。 （不要忘记首先初始化插件;在DOM准备好的所有表单上调用.validate() 。）
然后在最后一节，我在每个表单上使用.serialize()并将它们连接成一个要提交的数据查询字符串。
这样的东西……
$(document).ready(function() { // <-- DOM ready handler $('#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 var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize() // ajax submit return false; // block regular form submit action } }); // 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/dNPFX/
另外，请参阅：
您需要做的是在表单有效之前不让它们更改页面。 jQuery Validate中的默认值是仅validation“可见”字段，这对您有利。
在显示下一个“图层”之前，您正在进行validation。
首先，请参阅文档中的示例 。
所以你的等价物就是：
//remember to save the validation object like this var v = $(".selector").validate({ /* ... */}); //then add a click handler for your button $("#C1").click(function() { //this runs the validation and shows errors if it fails if (v.valid()) { //only move forward if the validation succeeds showLayer('page2'); } });