A Vue Material adapter for Vuelidate

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):

1. 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.

2. 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>

License

Software: MIT

Documentation: CC-BY-SA 4.0