DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Vue Validation

This demo shows how to implement a default validation group - a group of editors on a page with enabled data validation. In this particular demo, the editors are grouped in an HTML form.

Backend API
<template> <form action="your-action" @submit="onFormSubmit($event)" > <div class="dx-fieldset"> <div class="dx-fieldset-header">Credentials</div> <div class="dx-field"> <div class="dx-field-label">Email</div> <div class="dx-field-value"> <DxTextBox :input-attr="{ 'aria-label': 'Email' }"> <DxValidator> <DxRequiredRule message="Email is required"/> <DxEmailRule message="Email is invalid"/> <DxAsyncRule :validation-callback="asyncValidation" message="Email is already registered" /> </DxValidator> </DxTextBox> </div> </div> <div class="dx-field"> <div class="dx-field-label">Password</div> <div class="dx-field-value"> <DxTextBox v-model:value="password" :input-attr="{ 'aria-label': 'Password' }" v-model:mode="passwordMode" @value-changed="onPasswordChanged" > <DxTextBoxButton name="password" location="after" :options="passwordButton" /> <DxValidator> <DxRequiredRule message="Password is required"/> </DxValidator> </DxTextBox> </div> </div> <div class="dx-field"> <div class="dx-field-label">Confirm Password</div> <div class="dx-field-value"> <DxTextBox v-model:value="confirmPassword" :input-attr="{ 'aria-label': 'Password' }" v-model:mode="confirmPasswordMode" > <DxTextBoxButton name="password" location="after" :options="confirmPasswordButton" /> <DxValidator @initialized="onInit"> <DxRequiredRule message="Confirm Password is required"/> <DxCompareRule :comparison-target="passwordComparison" message="Password and Confirm Password do not match" /> </DxValidator> </DxTextBox> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Personal Data</div> <div class="dx-field"> <div class="dx-field-label">Name</div> <div class="dx-field-value"> <DxTextBox value="Peter" :input-attr="{ 'aria-label': 'Name' }" > <DxValidator> <DxRequiredRule message="Name is required"/> <DxPatternRule :pattern="namePattern" message="Do not use digits in the Name" /> <DxStringLengthRule :min="2" message="Name must have at least 2 symbols" /> </DxValidator> </DxTextBox> </div> </div> <div class="dx-field"> <div class="dx-field-label">Date of birth</div> <div class="dx-field-value"> <DxDateBox invalid-date-message="The date must have the following format: MM/dd/yyyy" :input-attr="{ 'aria-label': 'Date' }" > <DxValidator> <DxRequiredRule message="Date of birth is required"/> <DxRangeRule :max="maxDate" message="You must be at least 21 years old" /> </DxValidator> </DxDateBox> </div> </div> <div class="dx-field"> <div class="dx-field-label">Vacation Dates</div> <div class="dx-field-value"> <DxDateRangeBox :input-attr="{ 'aria-label': 'Vacation' }" > <DxValidator> <DxCustomRule :validation-callback="validateVacationDatesRange" message="The vacation period must not exceed 25 days" /> <DxCustomRule :validation-callback="validateVacationDatesPresence" message="Both start and end dates must be selected" /> </DxValidator> </DxDateRangeBox> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Billing address</div> <div class="dx-field"> <div class="dx-field-label">Country</div> <div class="dx-field-value"> <DxSelectBox :data-source="countries" :input-attr="{ 'aria-label': 'Country' }" validation-message-position="left" > <DxValidator> <DxRequiredRule message="Country is required"/> </DxValidator> </DxSelectBox> </div> </div> <div class="dx-field"> <div class="dx-field-label">City</div> <div class="dx-field-value"> <DxTextBox validation-message-position="left" :input-attr="{ 'aria-label': 'City' }" > <DxValidator> <DxRequiredRule message="City is required"/> <DxPatternRule :pattern="namePattern" message="Do not use digits in the City name" /> <DxStringLengthRule :min="2" message="City must have at least 2 symbols" /> </DxValidator> </DxTextBox> </div> </div> <div class="dx-field"> <div class="dx-field-label">Address</div> <div class="dx-field-value"> <DxTextBox validation-message-position="left" :input-attr="{ 'aria-label': 'Address' }" > <DxValidator> <DxRequiredRule message="Address is required"/> </DxValidator> </DxTextBox> </div> </div> <div class="dx-field"> <div class="dx-field-label">Phone <i>(optional)</i></div> <div class="dx-field-value"> <DxTextBox :mask-rules="phoneRules" :input-attr="{ 'aria-label': 'Mask' }" mask="+1 (X00) 000-0000" mask-invalid-message="The phone must have a correct USA phone format" validation-message-position="left" > <DxValidator> <DxPatternRule :pattern="phonePattern" message="The phone must have a correct USA phone format" /> </DxValidator> </DxTextBox> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label"> <DxCheckBox id="check" :value="false" text="I agree to the Terms and Conditions" validation-message-position="right" > <DxValidator> <DxCompareRule :comparison-target="checkComparison" message="You must agree to the Terms and Conditions" /> </DxValidator> </DxCheckBox> </div> <div class="dx-field-value"> <DxButton width="120px" :use-submit-behavior="true" text="Register" type="default" /> </div> </div> <DxValidationSummary id="summary"/> </div> </form> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxSelectBox from 'devextreme-vue/select-box'; import DxCheckBox from 'devextreme-vue/check-box'; import { DxTextBox, DxButton as DxTextBoxButton } from 'devextreme-vue/text-box'; import DxDateBox from 'devextreme-vue/date-box'; import DxDateRangeBox from 'devextreme-vue/date-range-box'; import DxButton from 'devextreme-vue/button'; import DxValidationSummary from 'devextreme-vue/validation-summary'; import { DxValidator, DxRequiredRule, DxCompareRule, DxEmailRule, DxPatternRule, DxStringLengthRule, DxRangeRule, DxAsyncRule, DxCustomRule, } from 'devextreme-vue/validator'; import notify from 'devextreme/ui/notify'; import service from './data.ts'; const currentDate = new Date(); const countries = ref(service.getCountries()); const phoneRules = ref({ X: /[02-9]/, }); const password = ref(''); const confirmPassword = ref(''); const passwordMode = ref('password'); const confirmPasswordMode = ref('password'); const passwordButton = ref({ icon: 'eyeopen', stylingMode: 'text', onClick: () => { passwordMode.value = passwordMode.value === 'text' ? 'password' : 'text'; }, }); const confirmPasswordButton = ref({ icon: 'eyeopen', stylingMode: 'text', onClick: () => { confirmPasswordMode.value = confirmPasswordMode.value === 'text' ? 'password' : 'text'; }, }); const namePattern = ref(/^[^0-9]+$/); const phonePattern = ref(/^[02-9]\d{9}$/); const maxDate = ref(new Date(currentDate.setFullYear(currentDate.getFullYear() - 21))); let validatorInstance; function passwordComparison() { return password.value; } function checkComparison() { return true; } function asyncValidation(params) { return sendRequest(params.value); } function validateVacationDatesRange({ value }) { const [startDate, endDate] = value; if (startDate === null || endDate === null) { return true; } const millisecondsPerDay = 24 * 60 * 60 * 1000; const daysDifference = Math.abs((endDate - startDate) / millisecondsPerDay); return daysDifference < 25; } function validateVacationDatesPresence({ value }) { const [startDate, endDate] = value; if (startDate === null && endDate === null) { return true; } return startDate !== null && endDate !== null; } function onPasswordChanged() { if (confirmPassword.value) { validatorInstance?.validate(); } } function onInit(e) { validatorInstance = e.component; } function 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 = 'test@dx-email.com'; return new Promise((resolve) => { setTimeout(() => { resolve(value !== invalidEmail); }, 1000); }); } </script> <style scoped> #summary { padding-left: 10px; margin-top: 20px; margin-bottom: 10px; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../', 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.6/cjs', 'devextreme-vue': 'npm:devextreme-vue@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/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/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', '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.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: '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.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
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; }, };
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <script src="https://unpkg.com/core-js@2.6.12/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.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

To enable data validation for an editor, you need to declare the Validator component and implement validation rules. You can attach multiple validation rules to one component. The following list contains all available validation rule types:

  • required
    A validation rule that requires the validated field to have a value.

  • email
    A validation rule that requires the validated field to match the Email pattern.

  • async
    A custom validation rule used for server-side validation. Implement the validationCallback function to validate the target value.

  • compare
    A validation rule that requires the validated editor's value to equal the value of the specified expression. To apply this rule, implement the comparisonTarget function to specify the value against which this component compares the validated value.

  • pattern
    A validation rule that requires the validated field to match a specified pattern.

  • stringLength
    A validation rule that requires the target value length to fall within the range of the specified minimum and maximum values. This property only accepts string values.

  • range
    A validation rule that requires the target value length to fall within the range of the specified minimum and maximum values. This property only accepts date-time and numeric values.

  • numeric
    A validation rule that requires the validated field to have a numeric value.

  • custom
    A rule with custom validation logic. Implement the validationCallback function to validate the target value.

All validation rule types allow you to specify an error message for a component. You can also specify the message position for each editor. If your application implements a validation group, you can use a validation summary to display all validation errors in one place. In this demo, click the Register button to see a validation summary.

The Register button's useSubmitBehavior property is enabled. As a result, a click on the button validates and submits the HTML form. In your application, you can also implement the button's onClick event handler and use the validate() or validateGroup() method to validate a group of editors.