Your search did not match any results.
Form

Validation

Documentation

This demo shows how to validate the Form editors. Validation rules are specified for each form item using the validationRules option. All editors on the form are combined into a validation group defined by the form’s validationGroup option.

Note that the «Register» button here does not implement a usual onClick event handler. Instead, it has the useSubmitBehavior option 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.

Copy to CodeSandBox
Apply
Reset
<template> <div id="form-demo"> <div class="widget-container"> <form action="your-action" @submit="handleSubmit" > <dx-form :form-data.sync="customer" :read-only="false" :show-colon-after-label="true" :show-validation-summary="true" validation-group="customerData" > <dx-group-item caption="Credentials"> <dx-simple-item data-field="Email"> <dx-required-rule message="Email is required"/> <dx-email-rule message="Email is invalid"/> </dx-simple-item> <dx-simple-item :editor-options="passwordOptions" data-field="Password" > <dx-required-rule message="Password is required"/> </dx-simple-item> <dx-simple-item :editor-options="passwordOptions" editor-type="dxTextBox" > <dx-label text="Confirm Password"/> <dx-required-rule message="Confirm Password is required"/> <dx-compare-rule :comparison-target="passwordComparison" message="Password and Confirm Password do not match" /> </dx-simple-item> </dx-group-item> <dx-group-item caption="Personal Data"> <dx-simple-item data-field="Name"> <dx-required-rule message="Name is required"/> <dx-pattern-rule :pattern="namePattern" message="Do not use digits in the Name" /> </dx-simple-item> <dx-simple-item :editor-options="dateBoxOptions" data-field="Date" editor-type="dxDateBox" > <dx-label text="Date of birth"/> <dx-required-rule message="Date of birth is required"/> <dx-range-rule :max="maxDate" message="You must be at least 21 years old" /> </dx-simple-item> </dx-group-item> <dx-group-item caption="Billing address"> <dx-simple-item :editor-options="countryEditorOptions" data-field="Country" editor-type="dxSelectBox" > <dx-required-rule message="Country is required"/> </dx-simple-item> <dx-simple-item :editor-options="cityEditorOptions" data-field="City" editor-type="dxAutocomplete" > <dx-pattern-rule :pattern="cityPattern" message="Do not use digits in the City name" /> <dx-string-length-rule :min="2" message="City must have at least 2 symbols" /> <dx-required-rule message="City is required"/> </dx-simple-item> <dx-simple-item data-field="Address"> <dx-required-rule message="Address is required"/> </dx-simple-item> <dx-simple-item :editor-options="phoneEditorOptions" data-field="Phone" help-text="Enter the phone number in USA phone format" > <dx-pattern-rule :pattern="phonePattern" message="The phone must have a correct USA phone format" /> </dx-simple-item> <dx-simple-item :editor-options="checkBoxOptions" data-field="Accepted" editor-type="dxCheckBox" > <dx-label :visible="false"/> <dx-compare-rule :comparison-target="checkComparison" type="compare" message="You must agree to the Terms and Conditions" /> </dx-simple-item> </dx-group-item> <dx-button-item :button-options="buttonOptions" horizontal-alignment="left" /> </dx-form> </form> </div> </div> </template> <script> import DxForm, { DxGroupItem, DxSimpleItem, DxButtonItem, DxLabel, DxRequiredRule, DxCompareRule, DxRangeRule, DxStringLengthRule, DxPatternRule, DxEmailRule } from 'devextreme-vue/form'; import DxAutocomplete from 'devextreme-vue/autocomplete'; import notify from 'devextreme/ui/notify'; import service from './data.js'; export default { components: { DxGroupItem, DxSimpleItem, DxButtonItem, DxLabel, DxRequiredRule, DxCompareRule, DxPatternRule, DxRangeRule, DxEmailRule, DxStringLengthRule, DxForm, DxAutocomplete, notify }, data() { return { customer: service.getCustomer(), buttonOptions: { text: 'Register', type: 'success', useSubmitBehavior: true }, passwordOptions: { mode: 'password' }, dateBoxOptions: { invalidDateMessage: 'The date must have the following format: MM/dd/yyyy' }, checkBoxOptions: { text: 'I agree to the Terms and Conditions', value: false }, phoneEditorOptions: { mask: '+1 (X00) 000-0000', maskRules: { X: /[02-9]/ }, useMaskedValue: true, maskInvalidMessage: 'The phone must have a correct USA phone format' }, cityEditorOptions:{ dataSource: service.getCities(), minSearchLength: 2 }, countryEditorOptions: { dataSource: service.getCountries() }, maxDate: new Date().setYear(new Date().getYear() - 21), namePattern: /^[^0-9]+$/, cityPattern: /^[^0-9]+$/, phonePattern: /^\+\s*1\s*\(\s*[02-9]\d{2}\)\s*\d{3}\s*-\s*\d{4}$/ }; }, methods: { passwordComparison() { return this.customer.Password; }, checkComparison() { return true; }, handleSubmit(e) { notify({ message: 'You have submitted the form', position: { my: 'center top', at: 'center top' } }, 'success', 3000); e.preventDefault(); } } }; </script> <style scoped> form { margin: 10px; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<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="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></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"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
const customer = { 'Email': '', 'Password': '', 'Name': 'Peter', 'Date': null, 'Country': '', 'City': '', 'Address': '', 'Phone': '', 'Accepted': false }; 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']; const cities = [ 'New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'San Diego', 'Dallas', 'San Jose', 'Austin', 'Indianapolis', 'Jacksonville', 'San Francisco', 'Columbus', 'Charlotte', 'Fort Worth', 'Detroit', 'El Paso', 'Memphis', 'Seattle', 'Denver', 'Washington', 'Boston', 'Nashville', 'Baltimore', 'Oklahoma City', 'Louisville', 'Portland', 'Las Vegas', 'Milwaukee', 'Albuquerque', 'Tucson', 'Fresno', 'Sacramento', 'Long Beach', 'Kansas City', 'Mesa', 'Virginia Beach', 'Atlanta', 'Colorado Springs', 'Omaha', 'Raleigh', 'Miami', 'Oakland', 'Minneapolis', 'Tulsa', 'Cleveland', 'Wichita', 'Arlington', 'New Orleans', 'Bakersfield', 'Tampa', 'Honolulu', 'Aurora', 'Anaheim', 'Santa Ana', 'St. Louis', 'Riverside', 'Corpus Christi', 'Lexington', 'Pittsburgh', 'Anchorage', 'Stockton', 'Cincinnati', 'Saint Paul', 'Toledo', 'Greensboro', 'Newark', 'Plano', 'Henderson', 'Lincoln', 'Buffalo', 'Jersey City', 'Chula Vista', 'Fort Wayne', 'Orlando', 'St. Petersburg', 'Chandler', 'Laredo', 'Norfolk', 'Durham', 'Madison', 'Lubbock', 'Irvine', 'Winston–Salem', 'Glendale', 'Garland', 'Hialeah', 'Reno', 'Chesapeake', 'Gilbert', 'Baton Rouge', 'Irving', 'Scottsdale', 'North Las Vegas', 'Fremont', 'Boise', 'Richmond']; export default { getCustomer() { return customer; }, getCountries() { return countries; }, getCities() { return cities; } };
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });