使用jQuery validate插件检查是否选中了一个或多个复选框（具有不同的名称）

好的，所以我正在为Drupal 7网站实现jQuery validate插件。 我遇到的问题是表单的一部分生成多个名称略有不同的复选框。 因此，如果选择了这些复选框中的至少一个，则使用validation器插件似乎没有直接检查方法。

http://docs.jquery.com/Plugins/Validation#API_Documentation

更具体地说，用户必须选择一个或多个主题类别。 这些复选框的名称如下：“field_themes [und] [52]”，“field_themes [und] [55]”，“field_themes [und] [64]”和“field_themes [und] [65]”。

除此之外，我们还有一个与必须检查的其他复选框无关的复选框。 那是为了同意政策等。 插件很容易涵盖那个，但我认为这将使其他chekcbox的解决方案有点棘手。 我还有另一组复选框，但它们都使用相同的名称（Drupal有时很痛苦）。

所以我想了一下，并认为也许我可以使用submitHandler。 所以我想出了以下……

$('#photo-node-form').validate({ rules: { 'field_first_name[und][0][value]': 'required', 'field_last_name[und][0][value]': 'required', 'field_email_address[und][0][email]': { required: true, email: true, }, 'field_product_type[und]': 'required', 'field_terms_and_conditions[und]': 'required', }, messages: { 'field_first_name[und][0][value]': 'Please enter your first name.', 'field_last_name[und][0][value]': 'Please enter your last name.', 'field_email_address[und][0][email]': 'Please enter a valid email address.', 'field_product_type[und]': 'Please select a product.', 'field_terms_and_conditions[und]': 'You must confirm that you are 18 or older and agree to the terms and conditions.', }, submitHandler: function(form) { //Verify that at least one theme category is selected. var themeCatSelected = false; //First we have to find all of theme $('#photo-node-form input:checkbox').each(function(i) { //Make sure this is a theme checkbox var name = $(this).name; var isTheme = false; stristr(name, 'field_themes[und]', isTheme); if (isTheme && this.checked) { //See if this is checked themeCatSelected = true; } }); if (!themeCatSelected) { //Do something to alert the user that is not a popup alert return false; //Prevent form submittion } form.submit(); } }); //A JS reproduction of the PHP stristr function function stristr (haystack, needle, bool) { var pos = 0; haystack += ''; pos = haystack.toLowerCase().indexOf((needle + '').toLowerCase()); if (pos == -1) { return false; } else { if (bool) { return haystack.substr(0, pos); } else { return haystack.slice(pos); } } } 

所以我遇到的问题是我不知道如何在正常区域放错误，以显示此submitHandler函数的错误。 我甚至不确定这是否是最好的方法。 有没有人有任何想法？

谢谢！

Answer 1

你会想要做这些事情：

1. 为您的复选框创建一个组
2. 创建自定义validation方法以确保至少检查其中一个
3. 为每个复选框添加规则对象的规则
4. 自定义errorPlacement函数以将错误放在适当的位置

这是＃2的代码（请参阅此处了解选择器的工作原理）：

 $.validator.addMethod("custom_checks", function(value, element) { return $('#photo-node-form input[name^="field_themes[und]"]:checked').length > 0; }, 'Please check one of these'); 

这是＃1的代码和＃3的一部分：

 var tmpChecks = [], myRules = { 'field_first_name[und][0][value]': 'required', 'field_last_name[und][0][value]': 'required', 'field_email_address[und][0][email]': { required: true, email: true, }, 'field_product_type[und]': 'required', 'field_terms_and_conditions[und]': 'required' }; $('#photo-node-form input[name^="field_themes[und]"]').each(function(){ tmpChecks.push(this.name); //This is the start of #1 myRules[$(this).attr("name")] = { custom_checks: true }; //#3 }); 

对于＃4，将其添加到validation对象：

 errorPlacement: function(error, element) { if (element.attr("name").match(/^field_themes\[und\]/)){ $('#checkbox_errors').html(error); } else { error.insertAfter(element); } } 

你最终调用这样的validation：

 $("#photo-node-form").validate({ rules: myRules, groups: { checks: tmpChecks.join(' ') //the rest of #1 }, errorPlacement: function(error, element) { if (element.attr("name").match(/^field_themes\[und\]/)){ //I added this span after all the textboxes, you can figure this out in a more dynamic way if you prefer $('#checkbox_errors').html(error); } else { error.insertAfter(element); } } }); 

这是一个简单forms的工作示例： http ： //jsfiddle.net/ryleyb/nUbGk/1/