import React from 'react';
import Form, {
ButtonItem,
GroupItem,
SimpleItem,
Label,
CompareRule,
EmailRule,
PatternRule,
RangeRule,
RequiredRule,
StringLengthRule,
AsyncRule,
} from 'devextreme-react/form';
import notify from 'devextreme/ui/notify';
import Validator from 'devextreme/ui/validator';
import 'devextreme-react/autocomplete';
import service from './data.js';
class App extends React.Component {
constructor() {
super();
this.formInstance = null;
this.buttonOptions = {
text: 'Register',
type: 'success',
useSubmitBehavior: true,
};
this.checkBoxOptions = {
text: 'I agree to the Terms and Conditions',
value: false,
};
this.cityEditorOptions = {
dataSource: service.getCities(),
minSearchLength: 2,
};
this.countryEditorOptions = {
dataSource: service.getCountries(),
};
this.passwordOptions = {
mode: 'password',
onValueChanged: () => {
const editor = this.formInstance.getEditor('ConfirmPassword');
if (editor.option('value')) {
const instance = Validator.getInstance(editor.element());
instance.validate();
}
},
buttons: [
{
name: 'password',
location: 'after',
options: {
icon: '../../../../images/icons/eye.png',
type: 'default',
onClick: () => this.changePasswordMode('Password'),
},
},
],
};
this.confirmOptions = {
mode: 'password',
buttons: [
{
name: 'password',
location: 'after',
options: {
icon: '../../../../images/icons/eye.png',
type: 'default',
onClick: () => this.changePasswordMode('ConfirmPassword'),
},
},
],
};
this.phoneEditorOptions = {
mask: '+1 (X00) 000-0000',
maskRules: {
X: /[02-9]/,
},
maskInvalidMessage: 'The phone must have a correct USA phone format',
};
this.maxDate = new Date().setFullYear(new Date().getFullYear() - 21);
this.dateBoxOptions = {
invalidDateMessage:
'The date must have the following format: MM/dd/yyyy',
};
this.state = {
customer: service.getCustomer(),
};
this.handleSubmit = this.handleSubmit.bind(this);
this.passwordComparison = this.passwordComparison.bind(this);
this.onInitialized = this.onInitialized.bind(this);
this.changePasswordMode = this.changePasswordMode.bind(this);
}
changePasswordMode(name) {
const editor = this.formInstance.getEditor(name);
editor.option('mode', editor.option('mode') === 'text' ? 'password' : 'text');
}
onInitialized(e) {
this.formInstance = e.component;
}
render() {
const {
customer,
} = this.state;
return (
<React.Fragment>
<form action="your-action" onSubmit={this.handleSubmit}>
<Form
formData={customer}
readOnly={false}
onInitialized={this.onInitialized}
showColonAfterLabel={true}
showValidationSummary={true}
validationGroup="customerData"
>
<GroupItem caption="Credentials">
<SimpleItem dataField="Email" editorType="dxTextBox">
<RequiredRule message="Email is required" />
<EmailRule message="Email is invalid" />
<AsyncRule
message="Email is already registered"
validationCallback={asyncValidation} />
</SimpleItem>
<SimpleItem dataField="Password" editorType="dxTextBox" editorOptions={this.passwordOptions}>
<RequiredRule message="Password is required" />
</SimpleItem>
<SimpleItem name="ConfirmPassword" editorType="dxTextBox" editorOptions={this.confirmOptions}>
<Label text="Confirm Password" />
<RequiredRule message="Confirm Password is required" />
<CompareRule
message="Password and Confirm Password do not match"
comparisonTarget={this.passwordComparison}
/>
</SimpleItem>
</GroupItem>
<GroupItem caption="Personal Data">
<SimpleItem dataField="Name">
<RequiredRule message="Name is required" />
<PatternRule message="Do not use digits in the Name"
pattern={/^[^0-9]+$/} />
</SimpleItem>
<SimpleItem dataField="Date"
editorType="dxDateBox"
editorOptions={this.dateBoxOptions}>
<Label text="Date of birth" />
<RequiredRule message="Date of birth is required" />
<RangeRule max={this.maxDate} message="You must be at least 21 years old" />
</SimpleItem>
</GroupItem>
<GroupItem caption="Billing address">
<SimpleItem dataField="Country" editorType="dxSelectBox" editorOptions={this.countryEditorOptions}>
<RequiredRule message="Country is required" />
</SimpleItem>
<SimpleItem dataField="City" editorType="dxAutocomplete" editorOptions={this.cityEditorOptions}>
<PatternRule pattern={/^[^0-9]+$/} message="Do not use digits in the City name" />
<StringLengthRule min={2} message="City must have at least 2 symbols" />
<RequiredRule message="City is required" />
</SimpleItem>
<SimpleItem dataField="Address">
<RequiredRule message="Address is required" />
</SimpleItem>
<SimpleItem dataField="Phone"
helpText="Enter the phone number in USA phone format"
editorOptions={this.phoneEditorOptions}
>
<PatternRule
message="The phone must have a correct USA phone format"
pattern={/^[02-9]\d{9}$/}
/>
</SimpleItem>
<SimpleItem dataField="Accepted"
editorType="dxCheckBox"
editorOptions={this.checkBoxOptions}>
<Label visible={false} />
<CompareRule message="You must agree to the Terms and Conditions"
comparisonTarget={this.checkComparison}
/>
</SimpleItem>
</GroupItem>
<ButtonItem horizontalAlignment="left"
buttonOptions={this.buttonOptions}
/>
</Form>
</form>
</React.Fragment>
);
}
checkComparison() {
return true;
}
handleSubmit(e) {
notify({
message: 'You have submitted the form',
position: {
my: 'center top',
at: 'center top',
},
}, 'success', 3000);
e.preventDefault();
}
passwordComparison() {
return this.state.customer.Password;
}
}
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);
}
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="https://cdn3.devexpress.com/jslib/23.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" />
<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.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
form {
margin: 10px;
}
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;
},
};
window.exports = window.exports || {};
window.config = {
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
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.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.1.6/cjs',
'devextreme-react': 'npm:devextreme-react@23.1.6',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.2/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.49/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@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',
// 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.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/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.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);