Validate Radio Buttons with Only One Error Message

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

Example

<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]").is(":checked");
                }
                return true;
            }
        },
        messages: {
            radio: "This is a required field"
        }
    }).getKendoValidator();

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

See Also

• Validator JavaScript API Reference
• How to Show Tooltip on Mouse Over
• How to Use Use MutationObserver to Add Red Border and Hide Tooltip
• How to Use Templates to Customize Tooltips

For more runnable examples on the Kendo UI Validator widget, browse its How To documentation folder.