DevExtreme Vue - Validate and Submit an HTML Form
Commonly, editors nested into an HTML form are supposed to be validated on the client and then submitted to the server. The Button widget supports this scenario out of the box. Place the Button on the HTML form and set the useSubmitBehavior option to true.
jQuery
<form action="/Login" method="post"> <div id="login"></div> <div id="password"></div> <div id="validateAndSubmit"></div> </form>
$(function() { $("#login").dxTextBox({ name: "Login" }).dxValidator({ validationRules: [ { type: "required" } ] }); $("#password").dxTextBox({ name: "Password", mode: "password" }).dxValidator({ validationRules: [ { type: "required" } ] }); $("#validateAndSubmit").dxButton({ text: "Submit", type: "success", useSubmitBehavior: true }); });
Angular
<form action="/Login" method="post"> <dx-text-box name="Login"> <dx-validator> <dxi-validation-rule type="required"></dxi-validation-rule> </dx-validator> </dx-text-box> <dx-text-box name="Password" mode="password"> <dx-validator> <dxi-validation-rule type="required"></dxi-validation-rule> </dx-validator> </dx-text-box> <dx-button text="Submit" type="success" [useSubmitBehavior]="true"> </dx-button> </form>
import { DxTextBoxModule, DxValidatorModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTextBoxModule, DxValidatorModule, DxButtonModule ], // ... })
Note that the name option of the TextBox widgets in the previous code specifies the name attribute of the underlying <input>
element.
DevExtreme editors may belong to different validation groups. To specify which group the Button must validate, use the validationGroup option. If you do not set this option, the Button validates all editors whose validation group is not specified.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.