DevExtreme jQuery - 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.
@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.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.