A Vue Material adapter for Vuelidate
@undecaf/vue-material-vuelidate. Please update your dependencies accordingly. Thank you for using vue-material-vuelidate, and my apologies for the inconvenience!
As of v0.2.0, this repository has moved toVuelidate is a model-based validation for Vue.js that decouples validations nicely from the template.
This package (components MdVuelidated
and MdVuelidatedMsg
) simplifies
using Vuelidate together with Vue Material:
- Reduces boilerplate markup in the template
- Suppresses validation messages for fields that are still untouched (similar to Angular Material)
- Can be used with
MdField
,MdAutocomplete
,MdChips
andMdDatepicker
Installation
As a module:
$ npm install vue-material-vuelidate or$ yarn add vue-material-vuelidate
Included as <script>
:
Usage
Registering the components
...// This must come after Vue.use(VueMaterial) and Vue.use(Vuelidate):Vue
Validating Vue Material form fields
In order to validate
<md-field>
(any type of <input>
),
<md-autocomplete>
,
<md-chips>
or
<md-datepicker>
:
- Replace that tag with
<md-vuelidated>
. - Pass the desired Vue Material tag name as property
field
. - Express constraints in the
validations
object of your component in the usual way. - Bind property
model
to the respectivevalidations
member, e.g.$v.input
. - What to use as
v-model
for the input depends on the input component, see the examples below.
Examples
All examples assume that a suitable validations
object has been defined.
Validating text:
Enter your email address
Validating a selection:
Select at most two toppings Pepperoni Mushrooms Onions
Validating an autocomplete field:
Select a color
Validating a chips field:
Validating a date:
Select your birthday
Providing validation messages
Validation messages can be specified in two ways (both methods can be combined):
-
As the
messages
property of<md-vuelidated>
. This property must be bound to an object containing the message for each Vuelidate constraint, e.g.:messages="{ required: 'This field is required' }"
.These messages appear below the corresponding input field.
-
As
<md-vuelidated-msg>
elements, either inside<md-vuelidated>
or somewhere else. The Vuelidate constraint must be bound to propertyconstraint
, see the examples below.Messages placed inside
<md-vuelidated>
appear below the corresponding input field.
Messages outside<md-vuelidated>
are visible only if their container has CSS-classmd-invalid
.
Examples
Using the messages
property:
Enter your email address
As <md-vuelidated-msg>
tags:
Enter your email address Your mail address is required Not a valid mail address
Combining both methods:
Enter your email address Not a valid mail address
License
Software: MIT
Documentation: CC-BY-SA 4.0