DevExtreme React - Validate and Submit the Form
The Form widget uses the built-in validation engine to validate form item values. You can attach validation rules to a simple item using its validationRules option when you create items explicitly...
jQuery
$(function() { $("#formContainer").dxForm({ formData: { firstName: "John", lastName: "Heart" }, items: [{ dataField: "firstName", validationRules: [{ type: "required", message: "First Name is required" }, { type: "pattern", pattern: "^[a-zA-Z]+$", message: "The name should not contain digits" }] }, // ... ] }); });
Angular
<dx-form [(formData)]="employee"> <dxi-item dataField="firstName"> <dxi-validation-rule type="required" message="First Name is required"> </dxi-validation-rule> <dxi-validation-rule type="pattern" pattern="^[a-zA-Z]+$" message="The name should not contain digits"> </dxi-validation-rule> </dxi-item> <!-- ... --> </dx-form>
import { DxFormModule } from "devextreme-angular"; // ... export class AppComponent { employee = { firstName: "John", lastName: "Heart" } } @NgModule({ imports: [ // ... DxFormModule ], // ... })
Vue
<template> <DxForm :form-data="employee"> <DxSimpleItem data-field="firstName"> <DxRequiredRule message="First Name is required" /> <DxPatternRule pattern="^[a-zA-Z]+$" message="The name should not contain digits" /> </DxSimpleItem> <!-- ... --> </DxForm> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxForm, { DxSimpleItem, DxRequiredRule, DxPatternRule } from 'devextreme-vue/form'; export default { components: { DxForm, DxSimpleItem, DxRequiredRule, DxPatternRule }, data() { return { employee: { firstName: 'John', lastName: 'Heart' } } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Form, { SimpleItem, RequiredRule, PatternRule } from 'devextreme-react/form'; class App extends React.Component { employee: { firstName: 'John', lastName: 'Heart' } render() { return ( <Form formData={this.employee}> <SimpleItem dataField="firstName"> <RequiredRule message="First Name is required" /> <PatternRule pattern="^[a-zA-Z]+$" message="The name should not contain digits" /> </SimpleItem> {/* ... */} </Form> ); } } export default App;
... or when you customize automatically generated items.
jQuery
$(function() { $("#formContainer").dxForm({ formData: { firstName: "John", lastName: "Heart" }, customizeItem: function(item) { if(item.dataField === "FirstName" || item.dataField === "LastName") { item.validationRules = [{ type: "required", message: "The value is required" }, { type: "pattern", pattern: "^[a-zA-Z]+$", message: "The value should not contain digits" }] } } }); });
Angular
<dx-form [(formData)]="employee" [customizeItem]="form_customizeItem"> </dx-form>
import { DxFormModule } from "devextreme-angular"; // ... export class AppComponent { employee = { firstName: "John", lastName: "Heart" } form_customizeItem (item) { if (item.dataField === "FirstName" || item.dataField === "LastName") { item.validationRules = [{ type: "required", message: "The value is required" }, { type: "pattern", pattern: "^[a-zA-Z]+$", message: "The value should not contain digits" }] } } } @NgModule({ imports: [ // ... DxFormModule ], // ... })
Vue
<template> <DxForm :form-data="employee" :customize-item="form_customizeItem"> </DxForm> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxForm from 'devextreme-vue/form'; export default { components: { DxForm }, data() { return { employee: { firstName: 'John', lastName: 'Heart' } } }, methods: { form_customizeItem (item) { if (item.dataField === "FirstName" || item.dataField === "LastName") { item.validationRules = [{ type: "required", message: "The value is required" }, { type: "pattern", pattern: "^[a-zA-Z]+$", message: "The value should not contain digits" }] } } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Form from 'devextreme-react/form'; class App extends React.Component { employee: { firstName: 'John', lastName: 'Heart' } customizeItem(item) { if (item.dataField === "FirstName" || item.dataField === "LastName") { item.validationRules = [{ type: "required", message: "The value is required" }, { type: "pattern", pattern: "^[a-zA-Z]+$", message: "The value should not contain digits" }] } } render() { return ( <Form formData={this.employee} customizeItem={this.customizeItem}> </Form> ); } } export default App;
A single Form editor is validated individually once its value changes. If the value fails to pass the validation check, the editor displays an error message. Note that you can also call the validate() method to validate all Form editors simultaneously. In this case, the Form can display all validation errors at the bottom if you set the showValidationSummary option to true.
Usually, Form editors should be submitted to the server after being successfully validated on the client. The following code shows how to do this using a button form item. Note that the Form widget is wrapped in the <form>
tag in the markup.
jQuery
<form action="/Login" method="post"> <div id="formWidget"></div> </form>
$(function () { $("#formWidget").dxForm({ // ... validationGroup: "groupName", items: [{ itemType: "button", buttonOptions: { text: "Submit the Form", useSubmitBehavior: true } }, // ... ] }); });
Angular
<form action="/Login" method="post"> <dx-form ... validationGroup="groupName"> <dxi-item itemType="button" [buttonOptions]="buttonOptions"> </dxi-item> </dx-form> </form>
import { DxFormModule } from "devextreme-angular"; // ... export class AppComponent { buttonOptions = { text: "Submit the Form", useSubmitBehavior: true } } @NgModule({ imports: [ // ... DxFormModule ], // ... })
Vue
<template> <form action="/Login" method="post"> <DxForm ... validation-group="groupName"> <!-- ... --> <DxButtonItem> <DxButtonOptions text="Submit the Form" :use-submit-behavior="true" /> </DxButtonItem> </DxForm> </form> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxForm, { DxButtonItem, DxButtonOptions } from 'devextreme-vue/form'; export default { components: { DxForm, DxButtonItem, DxButtonOptions }, // ... } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Form, { ButtonItem, ButtonOptions } from 'devextreme-react/form'; class App extends React.Component { render() { return ( <form action="/Login" method="post"> <Form ... validationGroup="groupName"> {/* ... */} <ButtonItem> <ButtonOptions text="Submit the Form" useSubmitBehavior={true} /> </ButtonItem> </Form> </form> ); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.