Validate Min/Max checkbox count

[Mate]

Hi,

I have a survey app where I need to validate if the number of checked checkboxes is in the valid interval.
The min/max values are set in an admin interface and are available as data attributes of the input field.
The fields also have a data attribute which stores the question id which they belong to, so they can be filtered by question.

So basically it looks like this:

<input type="checkbox" value="option1" data-question="1" data-min="1" data-max="3">
<input type="checkbox" value="option2" data-question="1" data-min="1" data-max="3">
<input type="checkbox" value="option3" data-question="1" data-min="1" data-max="3">
<input type="checkbox" value="option4" data-question="1" data-min="1" data-max="3">
<input type="checkbox" value="option5" data-question="1" data-min="1" data-max="3">

What would be the best practice to handle this?

Best Wishes,
Matt

[Kiril Nikolov]

Hello Mate,

If you want to validate a form, based on custom requirement you can create your own rule, that will handle such scenario and calculate the values that you need. More information is available here:

http://docs.telerik.com/kendo-ui/api/javascript/ui/validator#configuration-rules

Regards,
Kiril Nikolov
Telerik

 

 

[Mate]

Hi Kirilov,

I did just that, but I am not sure how to go from here:

$(".edit_filling").kendoValidator({
  rules: {
    radio: function(input){
        if (input.filter("[type=radio]").length > 0) {
            if (input.filter("[type=radio]") && input.attr("required")) {
                return $(".edit_filling").find("[data-qsr=" + input.attr("data-qsr") + "]").is(":checked");
          }
        }
        return true;
    },
    cbs: function(input){
        var result;
        if (input.filter("[type=checkbox]").length > 0) {
            if (input.filter("[type=checkbox]") && input.attr("required")) {
                var gr = $(".edit_filling").find("input[type=checkbox][data-qsc=" + input.attr("data-qsc") + "]:checked").length;
                if (gr > 0 && gr < 4) {
                    result = true;
                } else {
                    result = false;
                }
            }
        }
        if (result === true) {
            return true;
        } else {
            return false;
        }

    }
  },
  messages: {
    radio: "Ths is a required field."
  }
});

The CBS rule should do the trick, but it doesn't seem to work. The gr variable stores the number of checked checkboxes which belong to the same question (data-qsc). Basically this value should be 1, 2 or 3 if valid, and all other values are invalid.

Please give me some more suggestions where to go from here.

[Mate]

I managed to solve the problem like this, but I want only 1 error message to appear above all the checkboxes. Right now there is an error message next to every checkbox if the checkbox group is not valid.

$(".edit_filling").kendoValidator({
              rules: {
                radio: function(input){
                    if (input.filter("[type=radio]").length > 0) {
                        if (input.filter("[type=radio]") && input.attr("required")) {
                            return $(".edit_filling").find("[data-qsr=" + input.attr("data-qsr") + "]").is(":checked");
                      }
                    }
                    return true;
                },
                cbs: function(input){
                    if (input.filter("[type=checkbox]").length > 0) {
                        if (input.filter("[type=checkbox][class='required']")) {
                            var qs = input.attr("data-qsc");
                            var grs = $("input[type='checkbox'][data-qsc='" + qs + "'].required");
                            var ans = $("input[type='checkbox'][data-qsc='" + qs + "']:checked").length;
                            if (parseInt(ans) > 0 && parseInt(ans) < 4) {
                                return true;
                            } else {
                                return false;
                            }

                        }
                    }
                    return true;
                }
              },
              messages: {
                radio: "This is a required field!"
              }
            });

[Kiril Nikolov]

Hello Mate,

I have tried to reproduce the issue, but to no avail. Can you please check the following Kendo UI Dojo and edit it in order to show the issue:

http://dojo.telerik.com/ocijA

Regards,
Kiril Nikolov
Telerik

 

 

[Mariano]

[quote]Kiril Nikolov said:

Hello Mate,

I have tried to reproduce the issue, but to no avail. Can you please check the following Kendo UI Dojo and edit it in order to show the issue:

http://dojo.telerik.com/ocijA

Regards,
Kiril Nikolov
Telerik

 

 

[/quote]

 

Your sample sucks!. The problem is with checkboxes no radios.

[Kiril Nikolov]

Hi,

It should be similar approach. Can you please open a separate support request with what you have tried so far and we will be happy to help!

Regards,
Kiril Nikolov
Telerik