使用jQuery验证插件，以检查是否一个或多个复选框（以不同的名称）被选择(Using the jQ

好了，我实现了jQuery验证插件一个Drupal第7位。我遇到的问题是，表格的一部分生成具有略有不同名称的多个复选框。正因为如此，似乎没有要检查一个直接的方式，使用验证器插件，如果选择这些复选框中的至少一个。

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

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

在此之上，我们也有不相关也必须检查其他的复选框。这一个是同意的政策和这样的。一个容易被插件覆盖，但我认为这将使其他chekcboxes有点棘手的解决方案。我也有另一组复选框，但它们都使用相同的名称（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函数的错误。我甚至不知道这是做到这一点的最好办法。有没有人有什么想法？

谢谢！

你会想要做这些事情：

创建组为您的复选框
创建一个自定义的验证方法，以确保其中至少有一个被选中
添加规则，你的规则对象;每个复选框
自定义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，添加到您的验证对象：

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

你最终会调用验证这样的：

$("#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);
        }
    }
});

下面是一个简单的形式在工作示例： http://jsfiddle.net/ryleyb/nUbGk/1/