# Input Validation
Validation is supported for the following form elements:
- Input
- Select
- Date
To validate, you can pass the validator function as a property for the required field:
{ validate: this.validateName, key: "name", label: "Name", type: "text", editable: true, placeholder: "Enter Name...", class: "name-col"},
The function parameters will have the changed value and the current row data:
validateName(value, data) {
if (value === '') {
return {
valid: false,
errorMessage: 'Please enter name'
}
}
return {
valid: true
};
}
If valid
is false
, the cell value will not be updated.
errorMessage
is optional and will be displayed in a tooltip if the value is invalid.
Below is a complete example:
Run example on CodeSandbox (opens new window)
<template>
<div>
<b-editable-table
bordered
class="editable-table"
v-model="items"
:fields="fields"
>
</b-editable-table>
</div>
</template>
<script>
import BEditableTable from "bootstrap-vue-editable-table";
import { BButton } from "bootstrap-vue";
export default {
components: {
BEditableTable,
},
data() {
return {
fields: [
{
key: "name",
label: "Name",
type: "text",
editable: true,
placeholder: "Enter Name...",
class: "name-col",
validate: this.validateName,
},
{
key: "department",
label: "Department",
type: "select",
editable: true,
class: "department-col",
options: [
{ value: 0, text: "Please select department" },
{ value: 1, text: "HR" },
{ value: 2, text: "Engineer" },
{ value: 3, text: "VP" },
{ value: 4, text: "CEO" },
],
validate: this.validateSelect,
},
{
key: "age",
label: "Age",
type: "range",
min: "0",
max: "100",
editable: true,
placeholder: "Enter Age...",
class: "age-col",
},
{
key: "dateOfBirth",
label: "Date Of Birth",
type: "date",
editable: true,
class: "date-col",
locale: "en",
validate: this.validateDate,
"date-format-options": {
year: "numeric",
month: "numeric",
day: "numeric",
},
},
{
key: "isActive",
label: "Is Active",
type: "checkbox",
editable: true,
class: "is-active-col",
},
],
items: [
{
id: 1,
age: 40,
name: "Dickerson",
department: 1,
dateOfBirth: "1984-05-20",
isActive: true,
},
{
id: 2,
age: 21,
name: "Larsen",
department: 2,
dateOfBirth: "1972-07-25",
isActive: false,
},
{
id: 3,
age: 89,
name: "Geneva",
department: 3,
dateOfBirth: "1981-02-02",
isActive: false,
},
{
id: 4,
age: 38,
name: "Jami",
department: 4,
dateOfBirth: "1964-10-19",
isActive: true,
},
],
};
},
methods: {
validateName(value, data) {
if (value === "") {
return {
valid: false,
errorMessage: "Please enter name",
};
}
return { valid: true };
},
validateDate(value, data) {
const year = new Date(value).getFullYear();
if (year > 2003) {
return {
valid: false,
errorMessage: "Must be above 19",
};
}
return { valid: true };
},
validateSelect(value, data) {
if (value === 0) {
return {
valid: false,
errorMessage: "Please select a department",
};
}
return { valid: true };
},
},
};
</script>
<style>
table.editable-table {
margin: auto;
width: auto;
}
table.editable-table td {
vertical-align: middle;
padding: 0;
}
.editable-table .data-cell {
padding: 8px;
vertical-align: middle;
}
.editable-table .custom-checkbox {
width: 50px;
}
.name-col {
width: 120px;
}
.department-col {
width: 150px;
}
.age-col {
width: 100px;
}
.date-col {
width: 200px;
}
.is-active-col {
width: 100px;
}
</style>