New to Kendo UI for jQuery? Download free 30-day trial

Validate Radio Buttons with Only One Error Message

Environment

Product Progress® Kendo UI® Validator for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I validate radio buttons with only one error message in Kendo UI?

Solution

The following example demonstrates how to validate a group of Kendo UI radio buttons and show only one error message.

<div id="form">
    <span class="k-invalid-msg" data-for="test"></span><br/>
    Test 1<input type="radio" name="test" required /><br/>
    Test 1<input type="radio" name="test" required /><br/>
    Test 1<input type="radio" name="test" required /><br/>
    Test 1<input type="radio" name="test" required /><br/>
    Test 1<input type="radio" name="test" required /><br/>
    <button id="post">Post</button>
</div>

<script>
$(function(){
    var validator = $("#form").kendoValidator({
        rules: {
            radio: function(input) {
                if (input.filter("[type=radio]") && input.attr("required")) {
                    return $("#form").find("[type=radio][name=" + input.attr("name") + "]").is(":checked");
                }
                return true;
            }
        },
        messages: {
            radio: "This is a required field"
        }
    }).getKendoValidator();

    $("#post").click(function() {
        validator.validate();
    });
});
</script>

Validate Radio Buttons with Only One Error Message when the validationSummary is enabled

In scenario when the validationSummary is enabled a custom class can be added to the radio inputs. All the items, except one with the specified class needs to be hidden when the validation fails.

<div id="form">
    <div id="summary"></div>
    <span class="k-invalid-msg" data-for="test"></span><br/>
    Test 1<input type="radio" name="test" class="custom" required /><br/>
    Test 1<input type="radio" name="test" class="custom" required /><br/>
    Test 1<input type="radio" name="test" class="custom" required /><br/>
    Test 1<input type="radio" name="test" class="custom" required /><br/>
    Test 1<input type="radio" name="test" class="custom" required /><br/>
    <button id="post">Post</button>
</div>  
<script>
    $(function(){
      var validator = $("#form").kendoValidator({
        validationSummary: {container: '#summary'},
        rules: {
          radio: function(input) {
            if (input.filter("[type=radio]") && input.attr("required")) {
              return $("#form").find("[type=radio][name=" + input.attr("name") + "]").is(":checked");
            }
            return true;
          }
        },
        messages: {
          radio: "This is a required field"
        }
      }).getKendoValidator();      $("#post").click(function() {
        if (validator.validate()) {
          alert("Form completed!");
        }else{                  
          $($('[data-field="test"]').parent()).hide();
          $($('[data-field="test"]')[0]).parent().show()
        }
      });
    });
</script>

See Also

In this article