jQuery Validation Plugin: error class on all checkbox inputs in group

Question

I'm using the jQuery Validation Plugin on a form and I'm having problems styling a checkbox group. The plugin adds a class (.error) to the invalid input which I'm using to change the colour of the input.

The problem is that when you validate on a group of checkboxes it only adds the class to the first checkbox in the group. I would like it to behave in the same way radio inputs do. When none are selected they all get the error class, then when one is selected they all get the valid class.

DEMO: reduced test case with a checkbox input group and radio input group.

Submitting the form in the demo you can see that only the first checkbox gets the error class but all radio inputs get it.

// Example html
<form action="#" id="form" method="post">
  <ul>  
    <li>
      <input type="checkbox" name="checkbox[]" id="checkbox1">
      <label for="checkbox1">Mike</lable>
    </li>
    <li>
      <input type="checkbox" name="checkbox[]" id="checkbox2">
      <label for="checkbox2">November</lable>
    </li>
    <li>
      <input type="checkbox" name="checkbox[]" id="checkbox3">
      <label for="checkbox3">Oscar</lable>
    </li>
  </ul>
  <input type="submit" value="submit">
</form>

// Validation Plugin Config
$(document).ready(function() {
  $("#form").validate({
    rules: {
      "checkbox[]": {
         required: true,
         minlength: 1
         },
       radio: "required",
     },

     validClass: "js-valid",
     errorLabelContainer: ".js-errors",
     errorElement: "li",

     messages: {
       "checkbox[]": "Please select at least one checkbox",
       radio: "Please choose from the Radio Group",
     },
   });
 });

I found this suggestion in the jQuery forums but when I tried doing that the error class seemed to be applied to all the checkboxes but selecting one didn't remove it.

Yabsley · Accepted Answer · 2014-04-15 15:28:03Z

0

I've been unable to add a class to each checkbox input so I've worked around it using the highlight and unhighlight options in the plugin.

// Validation Plugin Config
$(document).ready(function() {
  $("#form").validate({
    rules: {
      "checkbox[]": {
         required: true,
         minlength: 1
       },
    radio: "required",
  },

  highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass); // add error class to elements/remove valid class
    $(element).closest('ul').addClass(errorClass); // add error class to ul element for checkbox groups and radio inputs
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass); // remove error class from elements/add valid class
    $(element).closest('ul').removeClass(errorClass); // remove error class from ul element for checkbox groups and radio inputs
  },

  errorLabelContainer: ".js-errors",
  errorElement: "li",

  messages: {
    "checkbox[]": "Please select at least one checkbox",
    radio: "Please choose from the Radio Group",
  },
 });

});

They add the error class to the parent ul which allows me to select and style the child inputs with css. Bit of a hack really but it gets the desired results

answered Apr 15, 2014 at 15:28

Yabsley

3801 gold badge4 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryley Over a year ago

Sounds good to me - consider filing a bug on the project over at github, it may turn out this is something that needs fixing: github.com/jzaefferer/jquery-validation

Collectives™ on Stack Overflow

jQuery Validation Plugin: error class on all checkbox inputs in group

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related