Events
The Telerik UI Form for ASP.NET Core exposes a number of JavaScript events that allow you to control the behavior of the UI component.
For a complete example of how to handle all Form events triggered by user interaction, refer to the demo on using the events of the Form .
Subscribing to Events
You can subscribe to all events of the Form component.
The following example shows a Form configured to handle its validate, submit and clear events.
<div id="validation-success"></div>
@(Html.Kendo().Form<Kendo.Mvc.Examples.Models.Form.UserViewModel>()
.Name("formExample")
.HtmlAttributes(new { action = "Index", method = "POST" })
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(false));
})
.Items(items =>
{
items.AddGroup()
.Label("Registration Form")
.Items(i =>
{
i.Add()
.Field(f => f.FirstName)
.Label(l => l.Text("First Name:"));
i.Add()
.Field(f => f.LastName)
.Label(l => l.Text("Last Name:"));
i.Add()
.Field(f => f.UserName)
.Label(l => l.Text("Username:"));
i.Add()
.Field(f => f.Email)
.Label(l => l.Text("Email:"));
i.Add()
.Field(f => f.DateOfBirth)
.Label(l => l.Text("Date of Birth:").Optional(true));
i.Add()
.Field(f => f.Agree)
.Label(l => l.Text("Agree to Terms:"));
});
})
.Events(ev => ev.ValidateField("onFormValidateField").Submit("onFormSubmit").Clear("onFormClear"))
<kendo-form name="exampleForm" form-data="@Model" method="POST" asp-action="Items" on-validate-field="onFormValidateField" on-submit="onFormSubmit" on-clear="onFormClear">
<validatable validate-on-blur="true" validation-summary="true" />
<form-items>
<form-item type="group">
<item-label text="Registration Form" />
<form-items>
<form-item field="TextBox">
<item-label text="TextBox:"/>
<textbox-editor placeholder="TextBox"></textbox-editor>
</form-item>
<form-item field="NumericTextBox">
<item-label text="NumericTextBox:" />
<numerictextbox-editor></numerictextbox-editor>
</form-item>
</form-items>
</form-item>
<form-item type="group">
<form-item field="MaskedTextBox">
<item-label text="MaskedTextBox:" optional="true" />
<maskedtextbox-editor></maskedtextbox-editor>
</form-item>
<form-item field="DatePicker">
<item-label text="DatePicker:" optional="true" />
</form-item>
</form-item>
</form-items>
</kendo-form>
function onFormValidateField(e) {
$("#validation-success").html("");
}
function onFormSubmit(e) {
e.preventDefault();
$("#validation-success").html("<div class='k-messagebox k-messagebox-success'>Form data is valid!</div>");
}
function onFormClear(e) {
$("#validation-success").html("");
}