Validation in Vue Grid component
28 Mar 202318 minutes to read
Column validation
Column validation allows you to validate the edited or added row data and it display errors for invalid fields before saving data.Grid uses Form Validator component for column validation. You can set validation rules by defining the columns.validationRules.
<template>
<div id="app">
<ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='273'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' :validationRules='orderIDRules' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' :validationRules='customerIDRules' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
orderIDRules: { required: true },
customerIDRules: { required: true, minLength: 3 }
};
},
provide: {
grid: [Page, Edit, Toolbar]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>Custom validation
You can define your own custom validation rules for the specific columns by using Form Validator custom rules.
In the below demo, custom validation applied for CustomerID column.
<template>
<div id="app">
<ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='273'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' :validationRules='orderIDRules' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' :validationRules='customerIDRules' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
orderIDRules: { required: true },
customerIDRules: { required: true, minLength: [(args) => {return args['value'].length >= 5;}, 'Need atleast 5 letters'] }
};
},
provide: {
grid: [Page, Edit, Toolbar]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>Custom validation based on dropdown change
You can apply validation rules and messages to a column based on another column value in edit mode. You can achieve this requirement by using the custom validation feature of Grid.
In the following sample, dropdownlist edit type is used for the Role and Salary columns. Here, you can apply the custom validation in the Salary column based on the value selected in the Role column.
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" :editSettings="editSettings" :toolbar="toolbar" :load="load">
<e-columns>
<e-column field="EmployeeID" headerText="Employee ID" textAlign="Right" :isPrimaryKey="true" width="120"></e-column>
<e-column field="Role" headerText="Role" editType="dropdownedit" :edit="roleParams"
width="160"></e-column>
<e-column field="Salary" headerText="Salary" textAlign="Right" editType="dropdownedit"
width="160" :edit="salaryParams"></e-column>
<e-column field="Address" headerText="Address" width="150"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { employeeDetails } from './datasource.js';
import { Query } from '@syncfusion/ej2-data';
Vue.use(GridPlugin);
window.role = "";
let jobRole = [
{ role: "TeamLead", destId: "0" },
{ role: "Manager", destId: "1" },
{ role: "Engineer", destId: "2" },
{ role: "Sales", destId: "3" },
{ role: "Support", destId: "4" },
];
let salaryDetails = [
{ salary: "11000", destId: "1" },
{ salary: "13500", destId: "2" },
{ salary: "16500", destId: "2" },
{ salary: "18500", destId: "1" },
{ salary: "21500", destId: "2" },
{ salary: "23000", destId: "2" },
];
export default {
data() {
return {
data: employeeDetails,
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true
},
toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"],
roleParams: {
params: {
allowFiltering: true,
dataSource: jobRole,
fields: { value: "role", text: "role" },
query: new Query(),
change: this.valChange
}
},
salaryParams: {
params: {
allowFiltering: true,
dataSource: salaryDetails,
fields: { value: "salary", text: "salary" },
query: new Query()
}
},
customFn: function (args) {
switch (window["role"]) {
case "Engineer":
if (args.value > 10000 && args.value < 15000) {
return true;
} else {
this.rules["Salary"]["required"][1] = "Please enter valid Engineer Salary";
}
break;
case "TeamLead":
if (args.value > 15000 && args.value < 20000) {
return true;
} else {
this.rules["Salary"]["required"][1] = "Please enter valid TeamLead Salary";
}
break;
case "Manager":
if (args.value > 20000 && args.value < 25000) {
return true;
} else {
this.rules["Salary"]["required"][1] = "Please enter valid Manager Salary";
}
break;
case "Sales":
if (args.value > 5000 && args.value < 25000) {
return true;
} else {
this.rules["Salary"]["required"][1] = "Please enter valid Manager Salary";
}
break;
case "Support":
if (args.value > 10000 && args.value < 19000) {
return true;
} else {
this.rules["Salary"]["required"][1] = "Please enter valid Manager Salary";
}
break;
}
return false;
}
};
},
methods: {
load: function () {
var column = this.$refs.grid.getColumnByField("Salary");
column.validationRules = {
required: [this.customFn, window["Please enter valid salary"]],
};
},
valChange: function (args) {
window["role"] = args.value;
}
},
provide: {
grid: [Edit, Toolbar]
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>