Vue-material-vuelidate NPM

A Vue Material adapter for Vuelidate

Minified size Open issues Total downloads License

As of v0.2.0, this repository has moved to @undecaf/vue-material-vuelidate. Please update your dependencies accordingly. Thank you for using vue-material-vuelidate, and my apologies for the inconvenience!

Vuelidate 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 and MdDatepicker

Installation

As a module:

$ npm install vue-material-vuelidate
    or
$ yarn add vue-material-vuelidate

Included as <script>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-material-vuelidate/dist/components.css">
<script src="https://cdn.jsdelivr.net/npm/vue-material-vuelidate/dist/components.min.js"></script>

Usage

Registering the components

import MdVuelidated from 'vue-material-vuelidated'
import 'vue-material-vuelidated/dist/components.css'
    ...
// This must come after Vue.use(VueMaterial) and Vue.use(Vuelidate):
Vue.use(MdVuelidated)

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 respective validations 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:

<md-vuelidated field="md-field" :model="$v.email">
  <label>Enter your email address</label>
  <md-input type="email" v-model.trim="$v.email.$model" />
</md-vuelidated>

Validating a selection:

<md-vuelidated field="md-field" :model="$v.toppings">
  <label>Select at most two toppings</label>
  <md-select v-model.trim="toppings" multiple>
    <md-option value="1">Pepperoni</md-option>
    <md-option value="2">Mushrooms</md-option>
    <md-option value="3">Onions</md-option>
  </md-select>
</md-vuelidated>

Validating an autocomplete field:

<md-vuelidated field="md-autocomplete" :md-options="colors" :model="$v.color">
  <label>Select a color</label>
</md-vuelidated>

Validating a chips field:

<md-vuelidated field="md-chips" md-placeholder="Enter keywords" :model="$v.keywords">
</md-vuelidated>

Validating a date:

<md-vuelidated field="md-datepicker" :model="$v.birthday">
  <label>Select your birthday</label>
</md-vuelidated>

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 property constraint, 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-class md-invalid.

Examples

Using the messages property:

<md-vuelidated
    field="md-field" 
    :model="$v.email"
    :messages="{ 
      required: 'Your mail address is required',
      email: 'Not a valid mail address',
    }">
  <label>Enter your email address</label>
  <md-input type="email" v-model.trim="$v.email.$model" />
</md-vuelidated>

As <md-vuelidated-msg> tags:

<md-vuelidated field="md-field" :model="$v.email">
  <label>Enter your email address</label>
  <md-input type="email" v-model.trim="$v.email.$model" />
  <md-vuelidated-msg :constraint="$v.email.required">Your mail address is required</md-vuelidated-msg>
  <md-vuelidated-msg :constraint="$v.email.email">Not a valid mail address</md-vuelidated-msg>
</md-vuelidated>

Combining both methods:

<md-vuelidated
    field="md-field" 
    :model="$v.email"
    :messages="{ required: 'Your mail address is required' }">
  <label>Enter your email address</label>
  <md-input type="email" v-model.trim="$v.email.$model" />
  <md-vuelidated-msg :constraint="$v.email.email">Not a valid mail address</md-vuelidated-msg>
</md-vuelidated>