Import plugin to your project e.g
import MPValidate from './src/validation.js'Vue.use(MPValidate, [options]);| Property | Description |
|---|---|
| errorDiv | class name for element with error message |
| errorClass | class name for error validation |
| successClass | class name for success validation |
| inputParentClass | class name for parent |
| validators | object with custom validate function |
| validatorsError | object with error message for custom validate |
- number
- string
- required
- minlength
- maxlength
Custom validate example
Vue.use(MPValidate, {
validators: {
example: (value) => false
},
validatorsError: {
example: "Incorrect value for custom validate function"
}
});Validate without parameters
<input v-validate.required.string type="text" placeholder="Surname" >Validate with parameter
<input v-validate.required.string="{ minlength: 3, maxlength: 15 }" type="text" placeholder="First name" autofocus>How to check validate before sending form? We must add event on submit form and next wait for Promise from $validate
...
methods: {
checkForm() {
this.$validate('#example-form')
.then(() => console.log('SENDING FORM'))
.catch(() => console.log('Ups. errors'));
},
}
...<form id="example-form" @submit.prevent="checkForm()" action="" method="post">
<div class="m-form">
<div class="m-form_item">
<label class="m-form_field is-icon">
<i class="fa fa-id-card-o" aria-hidden="true"></i>
<input v-validate.required.string="{ minlength: 3, maxlength: 15 }" type="text" placeholder="First name">
</label>
</div>
<div class="m-form_item">
<label class="m-form_field is-icon">
<i class="fa fa-id-card-o" aria-hidden="true"></i>
<input v-validate.required.string type="text" placeholder="Surname">
</label>
</div>
</div>
</form>In error message we can use two placeholder
| Placeholder | Description |
|---|---|
| %name% | name of validate field |
| %param% | validator param value |
Validator wihout param - example with required validator
<input v-validate.required type="text" placeholder="Login" >...
validatorsError = {
...
required: `Field %name% is required`,
...
}
...Validator with param - example with maxlength validator
<input v-validate="{ maxlength: 15 }" type="text" placeholder="Login" >...
validatorsError = {
...
maxlength: 'You can enter only %param% chars for field %name%'
...
}
...MIT