var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
var maxDate = new Date();
maxDate.setYear(maxDate.getYear() - 21);
var sendRequest = function(value) {
var validEmail = "test@dx-email.com";
var d = $.Deferred();
setTimeout(function() {
d.resolve(value === validEmail);
}, 1000);
return d.promise();
}
$scope.emailValidationRules = {
validationRules: [{
type: "required",
message: "Email is required"
}, {
type: "email",
message: "Email is invalid"
}, {
type: "async",
message: "Email is already registered",
validationCallback: function(params) {
return sendRequest(params.value);
}
}]
};
$scope.passwordValidationRules = {
validationRules: [{
type: "required",
message: "Password is required"
}]
};
$scope.confirmPasswordValidationRules = {
validationRules: [{
type: "compare",
comparisonTarget: function () {
var password = $("#password-validation").dxTextBox("instance");
if (password) {
return password.option("value");
}
},
message: "'Password' and 'Confirm Password' do not match."
},
{
type: "required",
message: "Confirm Password is required"
}]
};
$scope.nameValidationRules = {
validationRules: [{
type: "required",
message: "Name is required"
}, {
type: "pattern",
pattern: /^[^0-9]+$/,
message: "Do not use digits in the Name."
}, {
type: "stringLength",
min: 2,
message: "Name must have at least 2 symbols"
}]
};
$scope.dobValidationRules = {
validationRules: [{
type: "required",
message: "Date of birth is required"
}, {
type: "range",
max: maxDate,
message: "You must be at least 21 years old"
}]
};
$scope.countryValidationRules = {
validationRules: [{
type: "required",
message: "Country is required"
}]
};
$scope.cityValidationRules = {
validationRules: [{
type: "required",
message: "City is required"
}, {
type: "pattern",
pattern: "^[^0-9]+$",
message: "Do not use digits in the City name."
}, {
type: "stringLength",
min: 2,
message: "City must have at least 2 symbols"
}]
};
$scope.addressValidationRules = {
validationRules: [{
type: "required",
message: "Address is required"
}]
};
$scope.phoneTextBoxOptions = {
mask: "+1 (X00) 000-0000",
maskRules: {
X: /[02-9]/
},
maskInvalidMessage: "The phone must have a correct USA phone format",
useMaskedValue: true
};
$scope.phoneValidationRules = {
validationRules: [{
type: "pattern",
pattern: /^\+\s*1\s*\(\s*[02-9]\d{2}\)\s*\d{3}\s*-\s*\d{4}$/,
message: "The phone must have a correct USA phone format"
}]
};
$scope.checkValidationRules = {
validationRules: [{
type: "compare",
comparisonTarget: function(){ return true; },
message: "You must agree to the Terms and Conditions"
}]
};
$scope.dateboxOptions = {
invalidDateMessage: 'The date must have the following format: MM/dd/yyyy'
};
$scope.onFormSubmit = function(e) {
DevExpress.ui.notify({
message: "You have submitted the form",
position: {
my: "center top",
at: "center top"
}
}, "success", 3000);
e.preventDefault();
};
$scope.submitButtonOptions = {
text: 'Register',
type: 'success',
useSubmitBehavior: true
};
$scope.countries = countries;
});
<!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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<form id="form" action="your-action" ng-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">
<div dx-text-box="{ }"
dx-validator="emailValidationRules">
</div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Password</div>
<div class="dx-field-value">
<div id="password-validation" dx-text-box="{ mode: 'password' }"
dx-validator="passwordValidationRules">
</div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Confirm Password</div>
<div class="dx-field-value">
<div dx-text-box="{ mode: 'password' }"
dx-validator="confirmPasswordValidationRules">
</div>
</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">
<div dx-text-box="{ value: 'Peter' }"
dx-validator="nameValidationRules">
</div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Date of birth</div>
<div class="dx-field-value">
<div dx-date-box="dateboxOptions"
dx-validator="dobValidationRules">
</div>
</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">
<div dx-select-box="{ dataSource: countries }"
dx-validator="countryValidationRules">
</div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">City</div>
<div class="dx-field-value">
<div dx-text-box="{ }"
dx-validator="cityValidationRules">
</div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Address</div>
<div class="dx-field-value">
<div dx-text-box="{ }"
dx-validator="addressValidationRules">
</div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Phone <i>(optional)</i></div>
<div class="dx-field-value">
<div dx-text-box="phoneTextBoxOptions"
dx-validator="phoneValidationRules">
</div>
</div>
</div>
<div id="check" dx-check-box="{
value: false,
text: 'I agree to the Terms and Conditions'}"
dx-validator="checkValidationRules">
</div>
</div>
<div class="dx-fieldset">
<div id="summary" dx-validation-summary="{ }"></div>
<div id="button" dx-button="submitButtonOptions"></div>
</div>
</form>
</div>
</body>
</html>
#summary {
padding-left: 10px;
margin-top: 20px;
margin-bottom: 10px;
}
#button {
display: block;
}
var 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'];