Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
import React, {
useCallback, useMemo, useRef, useState,
} from 'react';
import SelectBox from 'devextreme-react/select-box';
import CheckBox from 'devextreme-react/check-box';
import { TextBox, Button as TextBoxButton, TextBoxTypes } from 'devextreme-react/text-box';
import DateBox from 'devextreme-react/date-box';
import DateRangeBox from 'devextreme-react/date-range-box';
import Button, { ButtonTypes } from 'devextreme-react/button';
import ValidationSummary from 'devextreme-react/validation-summary';
import {
Validator,
RequiredRule,
CompareRule,
EmailRule,
PatternRule,
StringLengthRule,
RangeRule,
AsyncRule,
CustomRule,
} from 'devextreme-react/validator';
import notify from 'devextreme/ui/notify';
import {
countries,
nameLabel,
passwordLabel,
emailLabel,
maskLabel,
dateLabel,
cityLabel,
addressLabel,
countryLabel,
} from './data.ts';
const cityPattern = '^[^0-9]+$';
const namePattern = /^[^0-9]+$/;
const phonePattern = /^[02-9]\d{9}$/;
const phoneRules = {
X: /[02-9]/,
};
const checkComparison: any = () => true;
const onFormSubmit = (e: { preventDefault: () => void }) => {
notify(
{
message: 'You have submitted the form',
position: {
my: 'center top',
at: 'center top',
},
},
'success',
3000,
);
e.preventDefault();
};
function App() {
const currentDate = new Date();
const maxDate = new Date(currentDate.setFullYear(currentDate.getFullYear() - 21));
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [passwordMode, setPasswordMode] = useState<TextBoxTypes.TextBoxType>('password');
const [confirmPasswordMode, setConfirmPasswordMode] = useState<TextBoxTypes.TextBoxType>('password');
const validatorRef = useRef(null);
const passwordButton = useMemo<ButtonTypes.Properties>(
() => ({
icon: 'eyeopen',
stylingMode: 'text',
onClick: () => {
setPasswordMode(passwordMode === 'text' ? 'password' : 'text');
},
}),
[passwordMode, setPasswordMode],
);
const confirmPasswordButton = useMemo<ButtonTypes.Properties>(
() => ({
icon: 'eyeopen',
stylingMode: 'text',
onClick: () => {
setConfirmPasswordMode(confirmPasswordMode === 'text' ? 'password' : 'text');
},
}),
[confirmPasswordMode, setConfirmPasswordMode],
);
const passwordComparison = useCallback<any>(() => password, [password]);
const onPasswordChanged = useCallback(
(e: TextBoxTypes.ValueChangedEvent) => {
setPassword(e.value);
if (confirmPassword) {
validatorRef.current.instance().validate();
}
},
[confirmPassword, setPassword],
);
const onConfirmPasswordChanged = useCallback((e: TextBoxTypes.ValueChangedEvent) => {
setConfirmPassword(e.value);
}, []);
return (
<form
action="your-action"
onSubmit={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 inputAttr={emailLabel}>
<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={passwordMode}
value={password}
inputAttr={passwordLabel}
onValueChanged={onPasswordChanged}
>
<TextBoxButton
name="password"
location="after"
options={passwordButton}
/>
<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
value={confirmPassword}
inputAttr={passwordLabel}
onValueChanged={onConfirmPasswordChanged}
mode={confirmPasswordMode}
>
<TextBoxButton
name="password"
location="after"
options={confirmPasswordButton}
/>
<Validator ref={validatorRef}>
<RequiredRule message="Confirm Password is required" />
<CompareRule
message="Password and Confirm Password do not match"
comparisonTarget={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"
inputAttr={nameLabel}
>
<Validator>
<RequiredRule message="Name is required" />
<PatternRule
message="Do not use digits in the Name"
pattern={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"
inputAttr={dateLabel}
>
<Validator>
<RequiredRule message="Date of birth is required" />
<RangeRule
message="You must be at least 21 years old"
max={maxDate}
/>
</Validator>
</DateBox>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Vacation Dates</div>
<div className="dx-field-value">
<DateRangeBox>
<Validator>
<CustomRule message="The vacation period must not exceed 25 days" validationCallback={validateVacationDatesRange} />
<CustomRule message="Both start and end dates must be selected" validationCallback={validateVacationDatesPresence} />
</Validator>
</DateRangeBox>
</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={countries}
validationMessagePosition="left"
inputAttr={countryLabel}
>
<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
validationMessagePosition="left"
inputAttr={cityLabel}
>
<Validator>
<RequiredRule message="City is required" />
<PatternRule
message="Do not use digits in the City name"
pattern={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
validationMessagePosition="left"
inputAttr={addressLabel}
>
<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"
inputAttr={maskLabel}
maskRules={phoneRules}
maskInvalidMessage="The phone must have a correct USA phone format"
validationMessagePosition="left"
>
<Validator>
<PatternRule
message="The phone must have a correct USA phone format"
pattern={phonePattern}
/>
</Validator>
</TextBox>
</div>
</div>
</div>
<div className="dx-fieldset">
<div className="dx-field">
<div className="dx-field-label">
<CheckBox
id="check"
defaultValue={false}
text="I agree to the Terms and Conditions"
validationMessagePosition="right"
>
<Validator>
<CompareRule
message="You must agree to the Terms and Conditions"
comparisonTarget={checkComparison}
/>
</Validator>
</CheckBox>
</div>
<div className="dx-field-value">
<Button
width="120px"
id="button"
text="Register"
type="default"
useSubmitBehavior={true}
/>
</div>
</div>
<ValidationSummary id="summary" />
</div>
</form>
);
}
function sendRequest(value: string) {
const invalidEmail = 'test@dx-email.com';
return new Promise((resolve) => {
setTimeout(() => {
resolve(value !== invalidEmail);
}, 1000);
});
}
function asyncValidation(params: { value: any }) {
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;
}
export default App;
import React, {
useCallback, useMemo, useRef, useState,
} from 'react';
import SelectBox from 'devextreme-react/select-box';
import CheckBox from 'devextreme-react/check-box';
import { TextBox, Button as TextBoxButton } from 'devextreme-react/text-box';
import DateBox from 'devextreme-react/date-box';
import DateRangeBox from 'devextreme-react/date-range-box';
import Button from 'devextreme-react/button';
import ValidationSummary from 'devextreme-react/validation-summary';
import {
Validator,
RequiredRule,
CompareRule,
EmailRule,
PatternRule,
StringLengthRule,
RangeRule,
AsyncRule,
CustomRule,
} from 'devextreme-react/validator';
import notify from 'devextreme/ui/notify';
import {
countries,
nameLabel,
passwordLabel,
emailLabel,
maskLabel,
dateLabel,
cityLabel,
addressLabel,
countryLabel,
} from './data.js';
const cityPattern = '^[^0-9]+$';
const namePattern = /^[^0-9]+$/;
const phonePattern = /^[02-9]\d{9}$/;
const phoneRules = {
X: /[02-9]/,
};
const checkComparison = () => true;
const onFormSubmit = (e) => {
notify(
{
message: 'You have submitted the form',
position: {
my: 'center top',
at: 'center top',
},
},
'success',
3000,
);
e.preventDefault();
};
function App() {
const currentDate = new Date();
const maxDate = new Date(currentDate.setFullYear(currentDate.getFullYear() - 21));
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [passwordMode, setPasswordMode] = useState('password');
const [confirmPasswordMode, setConfirmPasswordMode] = useState('password');
const validatorRef = useRef(null);
const passwordButton = useMemo(
() => ({
icon: 'eyeopen',
stylingMode: 'text',
onClick: () => {
setPasswordMode(passwordMode === 'text' ? 'password' : 'text');
},
}),
[passwordMode, setPasswordMode],
);
const confirmPasswordButton = useMemo(
() => ({
icon: 'eyeopen',
stylingMode: 'text',
onClick: () => {
setConfirmPasswordMode(confirmPasswordMode === 'text' ? 'password' : 'text');
},
}),
[confirmPasswordMode, setConfirmPasswordMode],
);
const passwordComparison = useCallback(() => password, [password]);
const onPasswordChanged = useCallback(
(e) => {
setPassword(e.value);
if (confirmPassword) {
validatorRef.current.instance().validate();
}
},
[confirmPassword, setPassword],
);
const onConfirmPasswordChanged = useCallback((e) => {
setConfirmPassword(e.value);
}, []);
return (
<form
action="your-action"
onSubmit={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 inputAttr={emailLabel}>
<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={passwordMode}
value={password}
inputAttr={passwordLabel}
onValueChanged={onPasswordChanged}
>
<TextBoxButton
name="password"
location="after"
options={passwordButton}
/>
<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
value={confirmPassword}
inputAttr={passwordLabel}
onValueChanged={onConfirmPasswordChanged}
mode={confirmPasswordMode}
>
<TextBoxButton
name="password"
location="after"
options={confirmPasswordButton}
/>
<Validator ref={validatorRef}>
<RequiredRule message="Confirm Password is required" />
<CompareRule
message="Password and Confirm Password do not match"
comparisonTarget={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"
inputAttr={nameLabel}
>
<Validator>
<RequiredRule message="Name is required" />
<PatternRule
message="Do not use digits in the Name"
pattern={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"
inputAttr={dateLabel}
>
<Validator>
<RequiredRule message="Date of birth is required" />
<RangeRule
message="You must be at least 21 years old"
max={maxDate}
/>
</Validator>
</DateBox>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Vacation Dates</div>
<div className="dx-field-value">
<DateRangeBox>
<Validator>
<CustomRule
message="The vacation period must not exceed 25 days"
validationCallback={validateVacationDatesRange}
/>
<CustomRule
message="Both start and end dates must be selected"
validationCallback={validateVacationDatesPresence}
/>
</Validator>
</DateRangeBox>
</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={countries}
validationMessagePosition="left"
inputAttr={countryLabel}
>
<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
validationMessagePosition="left"
inputAttr={cityLabel}
>
<Validator>
<RequiredRule message="City is required" />
<PatternRule
message="Do not use digits in the City name"
pattern={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
validationMessagePosition="left"
inputAttr={addressLabel}
>
<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"
inputAttr={maskLabel}
maskRules={phoneRules}
maskInvalidMessage="The phone must have a correct USA phone format"
validationMessagePosition="left"
>
<Validator>
<PatternRule
message="The phone must have a correct USA phone format"
pattern={phonePattern}
/>
</Validator>
</TextBox>
</div>
</div>
</div>
<div className="dx-fieldset">
<div className="dx-field">
<div className="dx-field-label">
<CheckBox
id="check"
defaultValue={false}
text="I agree to the Terms and Conditions"
validationMessagePosition="right"
>
<Validator>
<CompareRule
message="You must agree to the Terms and Conditions"
comparisonTarget={checkComparison}
/>
</Validator>
</CheckBox>
</div>
<div className="dx-field-value">
<Button
width="120px"
id="button"
text="Register"
type="default"
useSubmitBehavior={true}
/>
</div>
</div>
<ValidationSummary id="summary" />
</div>
</form>
);
}
function sendRequest(value) {
const invalidEmail = 'test@dx-email.com';
return new Promise((resolve) => {
setTimeout(() => {
resolve(value !== invalidEmail);
}, 1000);
});
}
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;
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(<App />, document.getElementById('app'));
export 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 const nameLabel = { 'aria-label': 'Name' };
export const emailLabel = { 'aria-label': 'Email' };
export const maskLabel = { 'aria-label': 'Mask' };
export const dateLabel = { 'aria-label': 'Date' };
export const cityLabel = { 'aria-label': 'City' };
export const addressLabel = { 'aria-label': 'Address' };
export const passwordLabel = { 'aria-label': 'Password' };
export const countryLabel = { 'aria-label': 'Country' };
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'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/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'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/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',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// 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.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export 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 const nameLabel = { 'aria-label': 'Name' };
export const emailLabel = { 'aria-label': 'Email' };
export const maskLabel = { 'aria-label': 'Mask' };
export const dateLabel = { 'aria-label': 'Date' };
export const cityLabel = { 'aria-label': 'City' };
export const addressLabel = { 'aria-label': 'Address' };
export const passwordLabel = { 'aria-label': 'Password' };
export const countryLabel = { 'aria-label': 'Country' };
<!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.2.3/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<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.tsx");
</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;
}
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.