All docs
V21.1
24.2
The page you are viewing does not exist in version 24.2.
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

JavaScript/jQuery Form - Validate and Submit the Form

The Form UI component uses the built-in validation engine to validate form item values. You can attach validation rules to a simple item using its validationRules property when you create items explicitly...

JavaScript
  • $(function() {
  • $("#formContainer").dxForm({
  • formData: {
  • firstName: "John",
  • lastName: "Heart"
  • },
  • items: [{
  • dataField: "firstName",
  • validationRules: [{
  • type: "required",
  • message: "First Name is required"
  • }, {
  • type: "pattern",
  • pattern: "^[a-zA-Z]+$",
  • message: "The name should not contain digits"
  • }]
  • },
  • // ...
  • ]
  • });
  • });

... or when you customize automatically generated items.

JavaScript
  • $(function() {
  • $("#formContainer").dxForm({
  • formData: {
  • firstName: "John",
  • lastName: "Heart"
  • },
  • customizeItem: function(item) {
  • if(item.dataField === "FirstName" || item.dataField === "LastName") {
  • item.validationRules = [{
  • type: "required",
  • message: "The value is required"
  • }, {
  • type: "pattern",
  • pattern: "^[a-zA-Z]+$",
  • message: "The value should not contain digits"
  • }]
  • }
  • }
  • });
  • });
NOTE
The RequiredRule is attached to a form item implicitly if this item's isRequired property is set to true.

A single Form editor is validated individually once its value changes. If the value fails to pass the validation check, the editor displays an error message. Note that you can also call the validate() method to validate all Form editors simultaneously. In this case, the Form can display all validation errors at the bottom if you set the showValidationSummary property to true.

Usually, Form editors should be submitted to the server after being successfully validated on the client. The following code shows how to do this using a button form item. Note that the Form UI component is wrapped in the <form> tag in the markup.

HTML
JavaScript
  • <form action="/Login" method="post">
  • <div id="formWidget"></div>
  • </form>
  • $(function () {
  • $("#formWidget").dxForm({
  • // ...
  • validationGroup: "groupName",
  • items: [{
  • itemType: "button",
  • buttonOptions: {
  • text: "Submit the Form",
  • useSubmitBehavior: true
  • }
  • },
  • // ...
  • ]
  • });
  • });

View Demo

See Also