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

Validatable

configuration

Configures the built-in Validator options.

validatable

Object

<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.errorTemplate

String|Function

Configures the Form Validator errorTemplate option.

<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>

validatable.messageBoxThemeColor

String

Configures the Form Validator messageBoxThemeColor option.

The supported values are:

base
primary
secondary
tertiary
info
success
warning
error
inverse

Default: "error"

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

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

validatable.validateOnBlur

Boolean

Configures the Form Validator validateOnBlur option.

Default: true

<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

Configures the Form Validator validationSummary option.

Default: 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>

<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>