使用 jQuery 驗證插件檢查是否選中了一個或多個復選框（具有不同的名稱）

Question

好的，所以我正在為 Drupal 7 站點實現 jQuery 驗證插件。 我遇到的問題是表單的一部分生成了多個名稱略有不同的復選框。 因此，如果至少選擇了這些復選框中的一個，則似乎沒有使用驗證器插件進行檢查的直接方法。

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 函數的錯誤。 我什至不確定這是否是最好的方法。 有沒有人有任何想法？

謝謝！

Answer 1

你會想做這些事情：

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/