One validation error for group of checkboxes

[Lee]

I have a list of checkboxes and I need to validate if at least one is checked. If not, I want one error message to appear for the entire group. That message should appear in a separate <span></span> below the group. I know how to do this with radio buttons but these are checkboxes so they can't all have the same name. I've looked at the other posts on here from 2013, 2015, and 2019 but none of them really answer my question. How would I do something like that?

[Neli]

Hi Lee,

From the provided information I am not sure if you are using the 'k-checkbox' class as in the demo linked below:

- https://demos.telerik.com/kendo-ui/checkbox/index

or you are configuring a CheckBoxGroup:

- https://demos.telerik.com/kendo-ui/checkboxgroup/index

However, I would suggest you configure a custom rule in Kendo Validator. In the custom rule, you could check the count of the checked checkboxes. 

 container.kendoValidator({
    rules: {     
      validateCheckboxes: function (input) {
        if (input.is("[type='checkbox']")) { 
          var allCheckboxes = $('#employeeForm .k-checkbox');  //get all checkbox elements
          var totalChecked = 0;

          allCheckboxes.each(function () { //loop through the checkboxes
            if ($(this).is(":checked")) { //check if the checkbox is checked
              totalChecked += 1; //count the checked
            }
          });

          if (totalChecked < 1) { //if none of the checkboxes is checked
            $(".k-form").attr("data-checkboxCustom-msg", "Select at least one option."); //add an error message as an attribute
            return false
          } else {
            return true
          }
        }
        return true;
      }
    },
    messages: {
      validateCheckboxes: function (input) {
        return $(".k-form").data("checkboxcustom-msg"); //display the error message
      }
    }
  });

Here is a Dojo where this is demonstrated.

I hope this helps.

Regards,
Neli
Progress Telerik

[Lee]

Thank you. This seems close but is a bit unpredictable. Sometimes the error message appears after checkbox1 and other times after checkbox2 or 3.

To answer your question, I'm not using any kendo checkboxes on my page. They are <input type="checkbox" ...  /> They are also not in a <ul>, just in divs. I'm seeing the message show up for all 3 on my site and I can't figure out why your code in the dojo only has it once unless it has something to do with it being wrapped in a <ul>.

[Neli]

Hi Lee,

I modified the example provided previously in order to use <div> elements instead of <ul>. In the modified Dojo linked here in the validateInput event hander the error message is removed from the checkbox where it is rendered and it is appended to the <div> element holding all checkboxes:

validateInput: function(e){ 
      $('#checkbox-div .k-invalid-msg').remove()
      $('#checkbox-div').append('<span class="k-form-error k-invalid-msg" data-for="" id="-error">Select at least one option.</span>')
    },

I hope you will find the modified example helpful for resolving the issue.

Regards,

Neli