Validation
Documentation
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 widget 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 widget.
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 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.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<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">
<dx-text-box>
<dx-validator>
<dxi-validation-rule type="required" message="Email is required"></dxi-validation-rule>
<dxi-validation-rule type="email" message="Email is invalid"></dxi-validation-rule>
</dx-validator>
</dx-text-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Password</div>
<div class="dx-field-value">
<dx-text-box
mode="password"
[(value)]="password">
<dx-validator>
<dxi-validation-rule type="required" message="Password is required"></dxi-validation-rule>
</dx-validator>
</dx-text-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Confirm Password</div>
<div class="dx-field-value">
<dx-text-box mode="password">
<dx-validator>
<dxi-validation-rule type="required" message="Confirm Password is required"></dxi-validation-rule>
<dxi-validation-rule type="compare" [comparisonTarget]="passwordComparison"
message="Password and Confirm Password do not match"></dxi-validation-rule>
</dx-validator>
</dx-text-box>
</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">
<dx-text-box value="Peter">
<dx-validator>
<dxi-validation-rule type="required" message="Name is required"></dxi-validation-rule>
<dxi-validation-rule type="pattern" [pattern]="namePattern" message="Do not use digits in the Name"></dxi-validation-rule>
<dxi-validation-rule type="stringLength" [min]="2" message="Name must have at least 2 symbols"></dxi-validation-rule>
</dx-validator>
</dx-text-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Date of birth</div>
<div class="dx-field-value">
<dx-date-box
invalidDateMessage="The date must have the following format: MM/dd/yyyy">
<dx-validator>
<dxi-validation-rule type="required" message="Date of birth is required"></dxi-validation-rule>
<dxi-validation-rule type="range" [max]="maxDate" message="You must be at least 21 years old"></dxi-validation-rule>
</dx-validator>
</dx-date-box>
</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">
<dx-select-box [dataSource]="countries">
<dx-validator>
<dxi-validation-rule type="required" message="Country is required"></dxi-validation-rule>
</dx-validator>
</dx-select-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">City</div>
<div class="dx-field-value">
<dx-text-box>
<dx-validator>
<dxi-validation-rule type="required" message="City is required"></dxi-validation-rule>
<dxi-validation-rule type="pattern" [pattern]="cityPattern" message="Do not use digits in the City name"></dxi-validation-rule>
<dxi-validation-rule type="stringLength" [min]="2" message="City must have at least 2 symbols"></dxi-validation-rule>
</dx-validator>
</dx-text-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Address</div>
<div class="dx-field-value">
<dx-text-box>
<dx-validator>
<dxi-validation-rule type="required" message="Address is required"></dxi-validation-rule>
</dx-validator>
</dx-text-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Phone <i>(optional)</i></div>
<div class="dx-field-value">
<dx-text-box
mask="+1 (X00) 000-0000"
[maskRules]="phoneRules"
maskInvalidMessage="The phone must have a correct USA phone format"
[useMaskedValue]="true">
<dx-validator>
<dxi-validation-rule type="pattern" [pattern]="phonePattern" message="The phone must have a correct USA phone format"></dxi-validation-rule>
</dx-validator>
</dx-text-box>
</div>
</div>
<div>
<dx-check-box
id="check"
[value]="false"
text="I agree to the Terms and Conditions">
<dx-validator>
<dxi-validation-rule type="compare" [comparisonTarget]="checkComparison" message="You must agree to the Terms and Conditions"></dxi-validation-rule>
</dx-validator>
</dx-check-box>
</div>
</div>
<div class="dx-fieldset">
<dx-validation-summary id="summary"></dx-validation-summary>
<dx-button
id="button"
text="Register"
type="success"
[useSubmitBehavior]="true">
</dx-button>
</div>
</form>
import { Component, NgModule, enableProdMode } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {DxSelectBoxModule,
DxCheckBoxModule,
DxTextBoxModule,
DxDateBoxModule,
DxButtonModule,
DxValidatorModule,
DxValidationSummaryModule} from 'devextreme-angular';
import notify from 'devextreme/ui/notify';
import { Service } from './app.service';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
providers: [Service],
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css']
})
export class AppComponent {
password = "";
maxDate: Date = new Date();
cityPattern = "^[^0-9]+$";
namePattern: any = /^[^0-9]+$/;
phonePattern: any = /^\+\s*1\s*\(\s*[02-9]\d{2}\)\s*\d{3}\s*-\s*\d{4}$/;
countries: string[];
phoneRules: any = {
X: /[02-9]/
}
constructor(service: Service) {
this.maxDate = new Date(this.maxDate.setFullYear(this.maxDate.getFullYear() - 21));
this.countries = service.getCountries();
}
passwordComparison = () => {
return this.password;
};
checkComparison() {
return true;
}
onFormSubmit = function(e) {
notify({
message: "You have submitted the form",
position: {
my: "center top",
at: "center top"
}
}, "success", 3000);
e.preventDefault();
}
}
@NgModule({
imports: [
BrowserModule,
DxSelectBoxModule,
DxCheckBoxModule,
DxTextBoxModule,
DxDateBoxModule,
DxButtonModule,
DxValidatorModule,
DxValidationSummaryModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #summary {
padding-left: 10px;
margin-top: 20px;
margin-bottom: 10px;
}
::ng-deep #button {
display: block;
}
import { Injectable } from '@angular/core';
let countries: string[] = [
'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'];
@Injectable()
export class Service {
getCountries() {
return countries;
}
}
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://github.com/DevExpress/devextreme-angular/blob/master/README.md
System.config({
transpiler: 'ts',
typescriptOptions: {
module: "commonjs",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js',
'typescript': 'npm:typescript@2.2.2/lib/typescript.js',
'@angular/core': 'npm:@angular/core@7.1.3/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@7.1.3/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@7.1.3/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@7.1.3/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@7.1.3/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'npm:@angular/router@7.1.3/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@7.1.3/bundles/forms.umd.js',
'@angular/common/http': 'npm:@angular/common@7.1.3/bundles/common-http.umd.js',
'tslib': 'npm:tslib/tslib.js',
'rxjs': 'npm:rxjs@6.3.3',
'rxjs/operators': 'npm:rxjs@6.3.3/operators',
'devextreme': 'npm:devextreme@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',
'devextreme-angular': 'npm:devextreme-angular@19.1'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'rxjs': { main: 'index.js', defaultExtension: 'js' },
'rxjs/operators': { main: 'index.js', defaultExtension: 'js' },
'devextreme-angular': {
main: 'index.js',
defaultExtension: 'js'
}
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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.3/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.light.css" />
<link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.ios7.default.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>