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...
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
],
// ...
})Vue
App.vue
<template>
<DxForm :form-data="employee">
<DxSimpleItem data-field="firstName">
<DxRequiredRule
message="First Name is required"
/>
<DxPatternRule
pattern="^[a-zA-Z]+$"
message="The name should not contain digits"
/>
</DxSimpleItem>
<!-- ... -->
</DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxForm, {
DxSimpleItem,
DxRequiredRule,
DxPatternRule
} from 'devextreme-vue/form';
export default {
components: {
DxForm,
DxSimpleItem,
DxRequiredRule,
DxPatternRule
},
data() {
return {
employee: {
firstName: 'John',
lastName: 'Heart'
}
}
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import Form, {
SimpleItem,
RequiredRule,
PatternRule
} from 'devextreme-react/form';
class App extends React.Component {
employee: {
firstName: 'John',
lastName: 'Heart'
}
render() {
return (
<Form
formData={this.employee}>
<SimpleItem dataField="firstName">
<RequiredRule
message="First Name is required"
/>
<PatternRule
pattern="^[a-zA-Z]+$"
message="The name should not contain digits"
/>
</SimpleItem>
{/* ... */}
</Form>
);
}
}
export default App;... 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
],
// ...
})Vue
App.vue
<template>
<DxForm
:form-data="employee"
:customize-item="form_customizeItem">
</DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxForm from 'devextreme-vue/form';
export default {
components: {
DxForm
},
data() {
return {
employee: {
firstName: 'John',
lastName: 'Heart'
}
}
},
methods: {
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"
}]
}
}
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import Form from 'devextreme-react/form';
class App extends React.Component {
employee: {
firstName: 'John',
lastName: 'Heart'
}
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"
}]
}
}
render() {
return (
<Form
formData={this.employee}
customizeItem={this.customizeItem}>
</Form>
);
}
}
export default App;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.
jQuery
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
}
},
// ...
]
});
});Angular
HTML
TypeScript
<form action="/Login" method="post">
<dx-form ...
validationGroup="groupName">
<dxi-item
itemType="button"
[buttonOptions]="buttonOptions">
</dxi-item>
</dx-form>
</form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
buttonOptions = {
text: "Submit the Form",
useSubmitBehavior: true
}
}
@NgModule({
imports: [
// ...
DxFormModule
],
// ...
})Vue
App.vue
<template>
<form action="/Login" method="post">
<DxForm ...
validation-group="groupName">
<!-- ... -->
<DxButtonItem>
<DxButtonOptions
text="Submit the Form"
:use-submit-behavior="true"
/>
</DxButtonItem>
</DxForm>
</form>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxForm, {
DxButtonItem,
DxButtonOptions
} from 'devextreme-vue/form';
export default {
components: {
DxForm,
DxButtonItem,
DxButtonOptions
},
// ...
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import Form, {
ButtonItem,
ButtonOptions
} from 'devextreme-react/form';
class App extends React.Component {
render() {
return (
<form action="/Login" method="post">
<Form ...
validationGroup="groupName">
{/* ... */}
<ButtonItem>
<ButtonOptions
text="Submit the Form"
useSubmitBehavior={true}
/>
</ButtonItem>
</Form>
</form>
);
}
}
export default App;See Also
Feedback