Validate and Submit the Form Widget

Editors nested in the Form widget can be validated only if they are bound to model properties that have Data Annotation validation attributes. To bind such editors, use the DataField method. Note that you can omit specifying the editor explicitly if the TextBox with default settings satisfies your needs.

@(Html.DevExtreme().Form()
    .FormData(Model)
    .Items(formItems => {
        formItems.AddSimple()
            .DataField("EmployeeID")
            .Editor(e => e.TextBox().ReadOnly(true));

        // Uses the default TextBox
        formItems.AddSimple()
            .DataField("FirstName")
            .IsRequired(true);

        // Uses the default TextBox   
        formItems.AddSimple()
            .DataField("LastName")
            .IsRequired(true);

        formItems.AddSimple()
            .DataField("HireDate")
            .Editor(e => e.DateBox());
    })
)

A single Form editor is validated individually each time its value is changed, but if you are going to submit Form editors, they all should be validated at once. This case is illustrated by the following code. All Form editors are collected in the "employee" validation group that is validated when an end user clicks the "Validate and Submit" Button. Afterwards, if the validation is successful, the "editEmployee" HTML form with all editors is submitted.

@using(Html.BeginForm("EditEmployee", "Home", FormMethod.Post, new { id = "editEmployee" })) {

    @(Html.DevExtreme().Form()
        .FormData(Model)
        .Items(formItems => {
            formItems.AddSimple()
                .DataField("EmployeeID")
                .Editor(e => e.TextBox().ReadOnly(true));

            formItems.AddSimple()
                .DataField("FirstName")
                .IsRequired(true);

            formItems.AddSimple()
                .DataField("LastName")
                .IsRequired(true);

            formItems.AddSimple()
                .DataField("HireDate")
                .Editor(e => e.DateBox());
        })
        // Gives a name to the internal validation group
        .ValidationGroup("employee")
    )

    // Validates the "employee" validation group and submits the "editEmployee" HTML form
    @(Html.DevExtreme().Button()
        .Text("Validate and Submit")
        .ValidationGroup("employee")
        .UseSubmitBehavior(true)
    )
}
See Also