Geek Answers Handbook

Using the jQuery validation plugin to check if one or more checkboxes (with different names) are selected

Well, that’s why I am introducing a jQuery validation plugin for the Drupal 7 website. The problem I am facing is that one part of the form generates several checkboxes with slightly different names. Because of this, there seems to be no direct way to verify using the validator plugin if at least one of these checkboxes is selected.

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

To be more specific, the user must select one or more categories of topics. These flags have the following names: "field_themes [und] [52]", "field_themes [und] [55]", "field_themes [und] [64]" and "field_themes [und] [65]".

In addition, we also have a checkbox that is not related to others that also need to be checked. This concerns policy harmonization, etc. This is easily covered by the plugin, but I think it will make the solution for other chekcboxes a bit more complicated. I also have another set of flags, but they all use the same name (sometimes Drupal is a pain).

So, I thought about this a bit and thought that maybe I can use submitHandler. So I came up with below ...

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

So the problem with this is that I'm not sure how to put the error in the normal area so that it displays the error for this submitHandler function. I'm not even sure if this is the best way to do this. Does anyone have any ideas?

Thanks!

+1
source share
1 answer

You will want to do the following:

  • Create a group for your flags
  • Create your own validation method to make sure at least one of them is checked.
  • Add rules to your rule object for each flag
  • Configure the errorPlacement function to put your error in the appropriate place.

This is the code for # 2 (see here on how the selector works):

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

Here is the code for # 1 and part # 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 });

And for # 4, add this to your validation object:

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

As a result, you invoke the confirmation as follows:

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

Here is an example of working in a simpler form: http://jsfiddle.net/ryleyb/nUbGk/1/

+2
source

More articles:


All Articles