DevExtreme React - 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 control supports this scenario out of the box. Place the Button on the HTML form and pass true to the UseSubmitBehavior method.

Razor C#
Razor VB
@model Application1.ViewModels.LoginViewModel

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

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

        // Creates a TextBox for the "Login" model property
        @(Html.DevExtreme().TextBoxFor(model => model.Login))

        // Creates a TextBox for the "Password" model property
        @(Html.DevExtreme().TextBoxFor(model => model.Password))
            .Mode(TextBoxMode.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)
        )
    }
}
@ModelType Application1.ViewModels.LoginViewModel

@Using (Html.BeginForm("LoginValidation", "Home", FormMethod.Post, New With { .id = "login" }))

    @Using(Html.DevExtreme().ValidationGroup())

        ' Creates a TextBox for the "Login" model property
        @(Html.DevExtreme().TextBoxFor(Function(model) model.Login))

        ' Creates a TextBox for the "Password" model property
        @(Html.DevExtreme().TextBoxFor(Function(model) model.Password) _
            .Mode(TextBoxMode.Password)
        )

        @(Html.DevExtreme().Button() _
            .ID("logIn") _
            .Text("Log In") _
            .Type(ButtonType.Success) _
            .UseSubmitBehavior(True) ' Instructs the Button to validate the TextBoxes and submit the form
        )
    End Using
End Using

Note that the Button validates the TextBox controls 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.

View Demo

See Also