jQuery验证：验证特定组

Question

我试图用jQuery Validate，和我的一个要求，是因为他们去通过向导用户界面，以验证某些特定群体。虽然我似乎无法找到此功能的jQuery Validate文档，但只能在网上找到非常模糊的参考。

我的声明基本上是这样的;

form.validate({ 
        groups: { 
         raceGroup: "race", 
         identityGroup: "name gender age" 
        }, 
        rules: { 
         race: { 
          required: true, 
         }, 
         gender: { 
          valueNotEquals: "Select Gender ...", 
          required: true 
         }, 
         name: { 
          pattern: "^(?!.*[ ]{2})(?!.*[']{2})(?!.*[-]{2})(?:[a-zA-Z0-9 \p{L}'-]{3,64}$)$" 
         } 
        }, 
        messages: { 
         race: { 
          required: "this is a required for your character." 
         }, 
         name: { 
          pattern: "You have entered an invalid name." 
         }, 
         gender: { 
          valueNotEquals: "You must select a valid gender.", 
          required: "You must select a valid gender." 
         } 
        } 
       }); 

好的，所以我有组定义...但现在什么？我如何检查组内的所有内容是否有效？ （或无效）

Answer 1

groups: { 
    raceGroup: "race", 
    identityGroup: "name gender age" 
}, 

“我如何检查是否在组内的一切是有效的吗？（或无效）”

你不知道。这不是groups选项的工作原理。

使用groups选项，你只是几个错误信息分组连成一片。例如：如果你有一组字段，每个使用require_from_group规则（任何“一个或多个”字段出的组的需要），则groups选项将确保仅出现一个消息，而不是重复旁边每个输入。

有用于创建验证组中没有定义的选项或标准化设置。

如果你正在试图做的台阶形式，有各种方法。

当我创建多步骤的形式，我用了一套独特的<form>标签为每个部分。然后我使用the .valid() method来测试该部分，然后再转到下一部分。 （不要忘了先初始化插件，请与.validate()，对各种形式的DOM的准备。）

然后在最后一节，我每个窗体上使用.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回调函数。

“概念证明” DEMO：http://jsfiddle.net/N9UpD/

另请参阅参考：

https://stackoverflow.com/a/17975061/594235