validatable Object

Configures the built-in Validator options.

Example

<form id="myForm"></form>

<script>
    $("#myForm").kendoForm({
        validatable: {
            validateOnBlur: true,
            validationSummary: true,
            errorTemplate: "<span>#=message#</span>"
        },
        formData: {
            ID: 1,
            Name: "Ivan",
            Address: "Sofia"
        },
        items: [{
            field: "Name",
            label: "Name:",
            validation: { required: true }
        }, {
            field: "Address",
            label: "Address:",
            validation: { required: true }
        }]
    });
</script>

validatable.validateOnBlur Boolean (default: true)

Configures the Form Validator validateOnBlur option.

Example - set validateOnBlur

<form id="myForm"></form>

<script>
    $("#myForm").kendoForm({
        validatable: {
            validateOnBlur: false,
        },
        formData: {
            ID: 1,
            Name: "Ivan",
            Address: "Sofia"
        },
        items: [{
            field: "Name",
            label: "Name:",
            validation: { required: true }
        }, {
            field: "Address",
            label: "Address:",
            validation: { required: true }
        }]
    });
</script>

validatable.validationSummary Boolean|Object (default: false)

Configures the Form Validator validationSummary option.

Example - set validationSummary to false

<form id="myForm"></form>

<script>
    $("#myForm").kendoForm({
        validatable: {
            validationSummary: false
        },
        formData: {
            ID: 1,
            Name: "Ivan",
            Address: "Sofia"
        },
        items: [{
            field: "Name",
            label: "Name:",
            validation: { required: true }
        }, {
            field: "Address",
            label: "Address:",
            validation: { required: true }
        }]
    });
</script>

Example - render validation summary in custom container

<form id="myForm"></form>
<div id="summary"></div>

<script>
    $("#myForm").kendoForm({
        validatable: {
            validationSummary: {
                container: "#summary"
            }
        },
        formData: {
            ID: 1,
            Name: "Ivan",
            Address: "Sofia"
        },
        items: [{
            field: "Name",
            label: "Name:",
            validation: { required: true }
        }, {
            field: "Address",
            label: "Address:",
            validation: { required: true }
        }]
    });
</script>

validatable.errorTemplate String|Function

Configures the Form Validator errorTemplate option.

Example - change validation message

<form id="myForm"></form>

<script>
    $("#myForm").kendoForm({
        validatable: {
            errorTemplate: "<span>#=message#</span>"
        },
        formData: {
            ID: 1,
            Name: "Ivan",
            Address: "Sofia"
        },
        items: [{
            field: "Name",
            label: "Name:",
            validation: { required: true }
        }, {
            field: "Address",
            label: "Address:",
            validation: { required: true }
        }]
    });
</script>