Использование плагина проверки jQuery для проверки того, выбран ли один или несколько флажков (с разными именами)

Итак, я реализую плагин проверки jQuery для сайта Drupal 7. Проблема, с которой я сталкиваюсь, состоит в том, что одна часть формы генерирует несколько флажков с немного разными именами. Из-за этого, похоже, нет прямого способа проверить, используя плагин validator, если выбран хотя бы один из этих флажков.

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. Я даже не уверен, что это лучший способ сделать это. У кого-нибудь есть идеи?

Благодаря!

Вы захотите сделать следующее:

  1. Создайте группу для своих флажков
  2. Создайте собственный метод проверки, чтобы убедиться, что хотя бы один из них проверен
  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 добавьте это в свой объект проверки:

 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/