Validate and Submit an HTML Form

Commonly, if editors are nested into an HTML form, they are supposed to be submitted to the server after being validated on the client. The DevExtreme Button widget supports this scenario out of the box. Place the Button on the HTML form and pass true to the UseSubmitBehavior method.

@model Application1.ViewModels.LoginViewModel

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

    using(Html.DevExtreme().ValidationGroup()) {

        @(Html.DevExtreme().TextBox()
            // Binds this TextBox to the "Login" model property
            .Name("Login")
            .Value(Model.Login)
        )

        @(Html.DevExtreme().TextBox()
            // Binds this TextBox to the "Password" model property
            .Name("Password")
            .Mode(TextBoxMode.Password)
            .Value(Model.Password)
        )

        @(Html.DevExtreme().Button()
            .ID("logIn")
            .Text("Log In")
            .Type(ButtonType.Success)
            // Instructs the Button to validate the TextBoxes and submit the form
            .UseSubmitBehavior(true)
        )
    }
}

Note that the Button validates the TextBox widgets in the previous code provided that the "Login" and "Password" model properties have Data Annotation validation attributes.

NOTE: The Button may validate different validation groups, but it always submits a definite HTML form - the one in which it is nested. To avoid mixing up validated and submitted values, we recommend that a single HTML form contain only a single validation group.

See Also