Inkline
Form Validators
Validators are configurable functions used to check whether an input value matches a specific criteria.
There are several validation options that can be used in the validators field:
Alpha Validator
<i-form v-model="form">
<i-form-group>
<i-input :schema="form.input" placeholder="This field should contain only letters" />
</i-form-group>
<i-form-group>
<i-input :schema="form.inputSpaces" placeholder="This field should contain only letters and spaces" />
</i-form-group>
<i-form-group>
<i-input :schema="form.inputDashes" placeholder="This field should contain only letters and dashes" />
</i-form-group>
</i-form>
export default {
data () {
return {
form: this.$inkline.form({
input: {
validators: [
{ rule: 'alpha' }
]
},
inputSpaces: {
validators: [
{ rule: 'alpha', allowSpaces: true },
]
},
inputDashes: {
validators: [
{ rule: 'alpha', allowDashes: true }
]
}
})
};
}
}
// console.log(this.form);
{
"input": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "alpha",
"enabled": true
}
],
"name": "input"
},
"inputSpaces": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "alpha",
"allowSpaces": true,
"enabled": true
}
],
"name": "inputSpaces"
},
"inputDashes": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "alpha",
"allowDashes": true,
"enabled": true
}
],
"name": "inputDashes"
},
"name": "",
"fields": [
"input",
"inputSpaces",
"inputDashes"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {}
}
Alphanumeric Validator
<i-form v-model="form">
<i-form-group>
<i-input :schema="form.input" placeholder="This field should contain only letters and numbers" />
</i-form-group>
<i-form-group>
<i-input :schema="form.inputSpaces" placeholder="This field should contain only letters, numbers and spaces" />
</i-form-group>
<i-form-group>
<i-input :schema="form.inputDashes" placeholder="This field should contain only letters, numbers and dashes" />
</i-form-group>
</i-form>
export default {
data () {
return {
form: this.$inkline.form({
input: {
validators: [
{ rule: 'alphanumeric' }
]
},
inputSpaces: {
validators: [
{ rule: 'alphanumeric', allowSpaces: true },
]
},
inputDashes: {
validators: [
{ rule: 'alphanumeric', allowDashes: true }
]
}
})
};
}
}
// console.log(this.form);
{
"input": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "alpha",
"enabled": true
}
],
"name": "input"
},
"inputSpaces": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "alpha",
"allowSpaces": true,
"enabled": true
}
],
"name": "inputSpaces"
},
"inputDashes": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "alpha",
"allowDashes": true,
"enabled": true
}
],
"name": "inputDashes"
},
"name": "",
"fields": [
"input",
"inputSpaces",
"inputDashes"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {}
}
Email Validator
<i-form v-model="form">
<i-form-group>
<i-input :schema="form.input" placeholder="This field is an email" />
</i-form-group>
</i-form>
export default {
data () {
return {
form: this.$inkline.form({
input: {
validators: [
{ rule: 'email' }
]
}
})
};
}
}
// console.log(this.form);
{
"input": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "email",
"enabled": true
}
],
"name": "input"
},
"name": "",
"fields": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {}
}
Max Validator
<i-form v-model="form">
<i-form-group>
<i-input :schema="form.input" placeholder="This field accepts a maximum value of 100." />
</i-form-group>
</i-form>
export default {
data () {
return {
form: this.$inkline.form({
input: {
validators: [
{ rule: 'max', value: 100 }
]
}
})
};
}
}
// console.log(this.form);
{
"input": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "max",
"value": 100,
"enabled": true
}
],
"name": "input"
},
"name": "",
"fields": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {}
}
Min Validator
<i-form v-model="form">
<i-form-group>
<i-input :schema="form.input" placeholder="This field accepts a minimum value of 10." />
</i-form-group>
</i-form>
export default {
data () {
return {
form: this.$inkline.form({
input: {
validators: [
{ rule: 'min', value: 10 }
]
}
})
};
}
}
// console.log(this.form);
{
"input": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "min",
"value": 10,
"enabled": true
}
],
"name": "input"
},
"name": "",
"fields": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {}
}
Max Length Validator
<i-form v-model="form">
<i-form-group>
<i-input :schema="form.input" placeholder="This field accepts up to 12 characters." />
</i-form-group>
</i-form>
export default {
data () {
return {
form: this.$inkline.form({
input: {
validators: [
{ rule: 'maxLength', value: 12 }
]
}
})
};
}
}
// console.log(this.form);
{
"input": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "maxLength",
"value": 12,
"enabled": true
}
],
"name": "input"
},
"name": "",
"fields": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {}
}
Min Length Validator
<i-form v-model="form">
<i-form-group>
<i-input :schema="form.input" placeholder="This field requires at least 6 characters." />
</i-form-group>
</i-form>
export default {
data () {
return {
form: this.$inkline.form({
input: {
validators: [
{ rule: 'minLength', value: 6 }
]
}
})
};
}
}
// console.log(this.form);
{
"input": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "minLength",
"value": 6,
"enabled": true
}
],
"name": "input"
},
"name": "",
"fields": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {}
}
Number Validator
<i-form v-model="form">
<i-form-group>
<i-input :schema="form.input" placeholder="This field should contain only numbers" />
</i-form-group>
<i-form-group>
<i-input :schema="form.inputNegative" placeholder="This field should contain positive or negative numbers" />
</i-form-group>
<i-form-group>
<i-input :schema="form.inputNegativeDecimal" placeholder="This field should contain positive or negative decimal numbers" />
</i-form-group>
</i-form>
export default {
data () {
return {
form: this.$inkline.form({
input: {
validators: [
{ rule: 'number' }
]
},
inputNegative: {
validators: [
{ rule: 'number', allowNegative: true }
]
},
inputNegativeDecimal: {
validators: [
{ rule: 'number', allowNegative: true, allowDecimal: true }
]
}
})
};
}
}
// console.log(this.form);
{
"input": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "number",
"enabled": true
}
],
"name": "input"
},
"inputNegative": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "number",
"allowNegative": true,
"enabled": true
}
],
"name": "inputNegative"
},
"inputNegativeDecimal": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "number",
"allowNegative": true,
"allowDecimal": true,
"enabled": true
}
],
"name": "inputNegativeDecimal"
},
"name": "",
"fields": [
"input",
"inputNegative",
"inputNegativeDecimal"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {}
}
Required Validator
<i-form v-model="form">
<i-form-group>
<i-input :schema="form.input" placeholder="This field is required" />
</i-form-group>
</i-form>
export default {
data () {
return {
form: this.$inkline.form({
input: {
validators: [
{ rule: 'required' }
]
}
})
};
}
}
// console.log(this.form);
{
"input": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "required",
"enabled": true
}
],
"name": "input"
},
"name": "",
"fields": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {}
}
Same As Validator
<i-form v-model="form">
<i-form-group>
<i-input :schema="form.password" placeholder="Password" />
</i-form-group>
<i-form-group>
<i-input :schema="form.passwordConfirmation" placeholder="Password Confirmation" />
</i-form-group>
</i-form>
export default {
data () {
return {
form: this.$inkline.form({
password: {},
passwordConfirmation: {
validators: [
{ rule: 'sameAs', target: 'password' }
]
}
})
};
}
}
// console.log(this.form);
{
"password": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"name": "password",
"validators": []
},
"passwordConfirmation": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "sameAs",
"target": "password",
"enabled": true
}
],
"name": "passwordConfirmation"
},
"name": "",
"fields": [
"password",
"passwordConfirmation"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {}
}
Custom Validator
You can provide a custom validation function that will be applied on the value of the input using the custom validator.
Custom Validator
<i-form v-model="form">
<i-form-group>
<i-input :schema="form.input" placeholder="This field is custom validated. It needs to contain 'inkline'." />
</i-form-group>
</i-form>
export default {
data () {
return {
form: this.$inkline.form({
input: {
validators: [
{ rule: 'custom', validator: (v) => /inkline/.test(v) }
]
}
})
};
}
}
// console.log(this.form);
{
"input": {
"value": "",
"validateOn": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {},
"validators": [
{
"rule": "custom",
"enabled": true
}
],
"name": "input"
},
"name": "",
"fields": [
"input"
],
"touched": false,
"untouched": true,
"dirty": false,
"pristine": true,
"invalid": false,
"valid": true,
"errors": {}
}