One validation error for group of checkboxes

1 Answer 257 Views
Validation
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Lee asked on 15 Nov 2021, 09:23 PM
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?

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 18 Nov 2021, 10:46 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Lee
Top achievements
Rank 1
Iron
Iron
Iron
commented on 18 Nov 2021, 06:05 PM

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
Telerik team
commented on 23 Nov 2021, 10:34 AM

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

Tags
Validation
Asked by
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Neli
Telerik team
Share this question
or