Validate Min/Max checkbox count

7 posts, 0 answers
  1. Mate
    Mate avatar
    13 posts
    Member since:
    Sep 2013

    Posted 07 Jan 2015 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 09 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Mate
    Mate avatar
    13 posts
    Member since:
    Sep 2013

    Posted 10 Jan 2015 in reply to Kiril Nikolov Link to this post

    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.
  5. Mate
    Mate avatar
    13 posts
    Member since:
    Sep 2013

    Posted 11 Jan 2015 Link to this post

    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!"
                  }
                });
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 13 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Mariano
    Mariano avatar
    4 posts
    Member since:
    Jan 2013

    Posted 18 Apr in reply to Kiril Nikolov Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     

     

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

  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 20 Apr Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready