DevExtreme Vue - Validate and Submit the Form

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

jQuery
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"
            }]
        },
        // ...
        ]
    });
});
Angular
HTML
TypeScript
<dx-form [(formData)]="employee">
    <dxi-item dataField="firstName">
        <dxi-validation-rule
            type="required"
            message="First Name is required">
        </dxi-validation-rule>
        <dxi-validation-rule
            type="pattern"
            pattern="^[a-zA-Z]+$"
            message="The name should not contain digits">
        </dxi-validation-rule>
    </dxi-item>
    <!-- ... -->
</dx-form>
import { DxFormModule } from 'devextreme-angular';
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

... or when you customize automatically generated items.

jQuery
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"
                }]
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [customizeItem]="form_customizeItem">
</dx-form>
import { DxFormModule } from 'devextreme-angular';
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart"
    }
    form_customizeItem (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"
            }]
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
NOTE
The RequiredRule is attached to a form item implicitly if the isRequired option of this item is set to true.

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

Commonly, Form editors should be submitted to the server after being successfully validated on the client. This scenario is supported by the Button widget out of the box. Wrap both Form and Button widgets in the <form> tag. Then, bind the Button to the inner validation group of the Form using the validationGroup option. After that, pass true to the useSubmitBehavior option of the Button to activate the submit behavior. In this case, a click on the Button validates all Form editors, and if they are valid, submits the HTML form to the server.

jQuery
HTML
JavaScript
<form action="/Login" method="post">
    <div id="formWidget"></div>
    <div id="validateSubmitButton"></div>
</form>
$(function () {
    $("#formWidget").dxForm({
        // ...
        validationGroup: "groupName"
    });

    $("#validateSubmitButton").dxButton({
        // ...
        validationGroup: "groupName",
        useSubmitBehavior: true
    });
});
Angular
HTML
TypeScript
<form action="/Login" method="post">
    <dx-form ...
        validationGroup="groupName">
        <!-- ... -->
    </dx-form>
    <dx-button ...
        validationGroup="groupName"
        [useSubmitBehavior]="true">
    </dx-button>
</form>
import { DxFormModule, DxButtonModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFormModule,
        DxButtonModule
    ],
    // ...
})
See Also