Your search did not match any results.
Documentation

This demo shows how to validate the Form editors. Validation rules are specified for each form item using the validationRules option. All editors on the form are combined into a validation group defined by the form’s validationGroup option.

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.

Copy to CodePen
Apply
Reset
window.onload = function() { var formInstance; var viewModel = { formOptions: { formData: formData, readOnly: false, showColonAfterLabel: true, showValidationSummary: true, validationGroup: "customerData", onInitialized: function(e) { formInstance = e.component; }, items: [{ itemType: "group", caption: "Credentials", items: [{ dataField: "Login", validationRules: [{ type: "required", message: "Login is required" }] }, { dataField: "Password", editorOptions: { mode: "password", value: ko.observable("") }, validationRules: [{ type: "required", message: "Password is required" }] }, { label: { text: "Confirm Password" }, editorType: "dxTextBox", editorOptions: { mode: "password" }, validationRules: [{ type: "required", message: "Confirm Password is required" }, { type: "compare", message: "'Password' and 'Confirm Password' do not match", comparisonTarget: function() { return formInstance.option("formData").Password; } }] }] }, { itemType: "group", caption: "Personal Data", items: [{ dataField: "Name", validationRules: [{ type: "required", message: "Name is required" }, { type: "pattern", pattern: "^[^0-9]+$", message: "Do not use digits in the Name" }] }, { dataField: "Date", editorType: "dxDateBox", label: { text: "Date of birth" }, editorOptions: { invalidDateMessage: "The date must have the following format: MM/dd/yyyy" }, validationRules: [{ type: "required", message: "Date of birth is required" }, { type: "range", max: new Date().setYear(new Date().getYear() - 21), message: "You must be at least 21 years old" }] }] }, { itemType: "group", caption: "Billing address", items: [{ dataField: "Country", editorType: "dxSelectBox", editorOptions: { dataSource: countries }, validationRules: [{ type: "required", message: "Country is required" }] }, { dataField: "City", validationRules: [{ 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" }, { type: "required", message: "City is required" }] }, { dataField: "Address", validationRules: [{ type: "required", message: "Address is required" }] }, { dataField: "Phone", helpText: "Enter the phone number in USA phone format", editorOptions: { mask: "+1 (X00) 000-0000", maskRules: { "X": /[02-9]/ }, maskInvalidMessage: "The phone must have a correct USA phone format", useMaskedValue: true }, 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" }] }] }, { dataField: "Accepted", label: { visible: false }, editorOptions: { text: "I agree to the Terms and Conditions" }, validationRules: [{ type: "compare", comparisonTarget: function() { return true; }, message: "You must agree to the Terms and Conditions" }] }] }, buttonOptions: { text: "Register", type: "success", useSubmitBehavior: true, validationGroup: "customerData" }, onFormSubmit: function() { DevExpress.ui.notify({ message: "You have submitted the form", position: { my: "center top", at: "center top" } }, "success", 3000); return false; } }; ko.applyBindings(viewModel, document.getElementById("form-demo")); };
<!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="js/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/17.2.3/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"> <form action="your-action" data-bind="submit: onFormSubmit"> <div id="form" data-bind="dxForm: formOptions"></div> <br /> <div data-bind="dxButton: buttonOptions"></div> </form> </div> </body> </html>
form { margin: 10px; }
var formData = { "Login": "", "Password": "", "Name": "Peter", "Date": null, "Country": "", "City": "", "Address": "", "Phone": "", "Accepted": false }; 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'];