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

ValidationSummary

configuration

Determines if validation summary will be displayed. Default value is false.

validationSummary

Boolean|Object

Default: false

<form id="myform">
    <input name="username" required /> <br />
    <button>Validate</button>
</form>

<script>
    $("#myform").kendoValidator({
      validationSummary: true
    });
</script>

validationSummary.container

String|jQuery

Defines the element in which the validation summary will be rendered. By default, the validation summary is rendered before the element on which the Validator is initialized.

<form id="myform">
    <input name="username" required /> <br />
    <button>Validate</button>
</form>
<div id="summary"></div>

<script>
    $("#myform").kendoValidator({
      validationSummary: {
        container: "#summary"
      }
    });
</script>

validationSummary.template

String|Function

Specifies the template for rendering the validation summary.

Parameters:errorsArray

The validation errors.

<form id="myform">
    <input name="username" required /> <br />
    <button>Validate</button>
</form>

<script>
    $("#myform").kendoValidator({
      validationSummary: {
        template: ({ errors }) => `<ul>${errors.map(error => '<li><a data-field="' + error.field +'" href="#">' + error.message + '</a></li>')}</ul>`
      }
    });
</script>