validatableObject
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.validateOnBlurBoolean(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.validationSummaryBoolean|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.errorTemplateString|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>validatable.messageBoxThemeColorString(default: "error")
Configures the Form Validator messageBoxThemeColor option.
The supported values are:
baseprimarysecondarytertiaryinfosuccesswarningerrorinverse
Example - set validation summary color
<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>