Your search did not match any results.



DevExtreme Data Editors provide a powerful and seamless way to perform data validation. In this demo, editors are collected in an HTML form. Each editor is accompanied by the Validator component validating the editor against a set of specified rules. Editors are validated each time their value is changed. All validation errors are displayed in the ValidationSummary component.

In the ASP.NET MVC demo, editors extract validation rules from data annotations attributed to the fields of the model (see the EditorsViewModel.cs file).

Note that the «Register» button here does not implement a usual onClick event handler. Instead, it has the useSubmitBehavior property set to true. This setting tells the button to validate and submit the HTML form in which it is nested, with no further configuration required.

Backend API
Copy to CodeSandBox
import React from 'react'; import SelectBox from 'devextreme-react/select-box'; import CheckBox from 'devextreme-react/check-box'; import TextBox from 'devextreme-react/text-box'; import DateBox from 'devextreme-react/date-box'; import Button from 'devextreme-react/button'; import ValidationSummary from 'devextreme-react/validation-summary'; import { Validator, RequiredRule, CompareRule, EmailRule, PatternRule, StringLengthRule, RangeRule, AsyncRule, } from 'devextreme-react/validator'; import notify from 'devextreme/ui/notify'; import service from './data.js'; class App extends React.Component { constructor(props) { super(props); const currentDate = new Date(); this.maxDate = new Date(currentDate.setFullYear(currentDate.getFullYear() - 21)); this.countries = service.getCountries(); this.cityPattern = '^[^0-9]+$'; this.namePattern = /^[^0-9]+$/; this.phonePattern = /^[02-9]\d{9}$/; this.phoneRules = { X: /[02-9]/, }; this.state = { password: '', }; this.passwordComparison = this.passwordComparison.bind(this); this.onPasswordChanged = this.onPasswordChanged.bind(this); } render() { return ( <form action="your-action" onSubmit={this.onFormSubmit}> <div className="dx-fieldset"> <div className="dx-fieldset-header">Credentials</div> <div className="dx-field"> <div className="dx-field-label">Email</div> <div className="dx-field-value"> <TextBox> <Validator> <RequiredRule message="Email is required" /> <EmailRule message="Email is invalid" /> <AsyncRule message="Email is already registered" validationCallback={asyncValidation} /> </Validator> </TextBox> </div> </div> <div className="dx-field"> <div className="dx-field-label">Password</div> <div className="dx-field-value"> <TextBox mode="password" value={this.state.password} onValueChanged={this.onPasswordChanged}> <Validator> <RequiredRule message="Password is required" /> </Validator> </TextBox> </div> </div> <div className="dx-field"> <div className="dx-field-label">Confirm Password</div> <div className="dx-field-value"> <TextBox mode="password"> <Validator> <RequiredRule message="Confirm Password is required" /> <CompareRule message="Password and Confirm Password do not match" comparisonTarget={this.passwordComparison} /> </Validator> </TextBox> </div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Personal Data</div> <div className="dx-field"> <div className="dx-field-label">Name</div> <div className="dx-field-value"> <TextBox value="Peter"> <Validator> <RequiredRule message="Name is required" /> <PatternRule message="Do not use digits in the Name" pattern={this.namePattern} /> <StringLengthRule message="Name must have at least 2 symbols" min={2} /> </Validator> </TextBox> </div> </div> <div className="dx-field"> <div className="dx-field-label">Date of birth</div> <div className="dx-field-value"> <DateBox invalidDateMessage="The date must have the following format: MM/dd/yyyy"> <Validator> <RequiredRule message="Date of birth is required" /> <RangeRule message="You must be at least 21 years old" max={this.maxDate} /> </Validator> </DateBox> </div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Billing address</div> <div className="dx-field"> <div className="dx-field-label">Country</div> <div className="dx-field-value"> <SelectBox dataSource={this.countries}> <Validator> <RequiredRule message="Country is required" /> </Validator> </SelectBox> </div> </div> <div className="dx-field"> <div className="dx-field-label">City</div> <div className="dx-field-value"> <TextBox> <Validator> <RequiredRule message="City is required" /> <PatternRule message="Do not use digits in the City name" pattern={this.cityPattern} /> <StringLengthRule message="City must have at least 2 symbols" min={2} /> </Validator> </TextBox> </div> </div> <div className="dx-field"> <div className="dx-field-label">Address</div> <div className="dx-field-value"> <TextBox> <Validator> <RequiredRule message="Address is required" /> </Validator> </TextBox> </div> </div> <div className="dx-field"> <div className="dx-field-label">Phone <i>(optional)</i></div> <div className="dx-field-value"> <TextBox mask="+1 (X00) 000-0000" maskRules={this.phoneRules} maskInvalidMessage="The phone must have a correct USA phone format"> <Validator> <PatternRule message="The phone must have a correct USA phone format" pattern={this.phonePattern} /> </Validator> </TextBox> </div> </div> <div> <CheckBox id="check" defaultValue={false} text="I agree to the Terms and Conditions"> <Validator> <CompareRule message="You must agree to the Terms and Conditions" comparisonTarget={this.checkComparison} /> </Validator> </CheckBox> </div> </div> <div className="dx-fieldset"> <ValidationSummary id="summary"></ValidationSummary> <Button id="button" text="Register" type="success" useSubmitBehavior={true} /> </div> </form> ); } passwordComparison() { return this.state.password; } checkComparison() { return true; } onPasswordChanged(e) { this.setState({ password: e.value, }); } onFormSubmit(e) { notify({ message: 'You have submitted the form', position: { my: 'center top', at: 'center top', }, }, 'success', 3000); e.preventDefault(); } } function sendRequest(value) { const invalidEmail = ''; return new Promise((resolve) => { setTimeout(() => { resolve(value !== invalidEmail); }, 1000); }); } function asyncValidation(params) { return sendRequest(params.value); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app'), );
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src=""></script> <script src=""></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#summary { padding-left: 10px; margin-top: 20px; margin-bottom: 10px; } #button { display: block; }
const countries = [ 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'The Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Central African Republic', 'Chad', 'Chile', 'China', 'Colombia', 'Comoros', 'Democratic Republic of the Congo', 'Republic of the Congo', 'Costa Rica', 'Ivory Coast', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Fiji', 'Finland', 'France', 'Gabon', 'The Gambia', 'Georgia', 'Germany', 'Ghana', 'Greece', 'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Honduras', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Republic of Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'North Korea', 'South Korea', 'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Republic of Macedonia', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Mauritania', 'Mauritius', 'Mexico', 'Federated States of Micronesia', 'Moldova', 'Monaco', 'Mongolia', 'Montenegro', 'Morocco', 'Mozambique', 'Namibia', 'Nauru', 'Nepal', 'Kingdom of the Netherlands', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Norway', 'Oman', 'Pakistan', 'Palau', 'State of Palestine', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Russia', 'Rwanda', 'Saint Kitts and Nevis', 'Saint Lucia', 'Saint Vincent and the Grenadines', 'Samoa', 'San Marino', 'São Tomé and Príncipe', 'Saudi Arabia', 'Senegal', 'Serbia', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'South Sudan', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Tajikistan', 'Tanzania', 'Thailand', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Tuvalu', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Vatican City', 'Venezuela', 'Vietnam', 'Yemen', 'Zambia', 'Zimbabwe']; export default { getCountries() { return countries; }, };
window.config = { transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': '', }, defaultExtension: 'js', map: { 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.1.5/cjs', 'devextreme-react': 'npm:devextreme-react@22.1.5', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.16/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.63/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.32/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', 'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.7.1/standalone.js', 'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.11/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);