Vue-validator-util NPM

vue-validator-util

Vue.js mixin with utility methods for vue-validator. Useful when using dynamic fields.

Install

npm install vue-validator-util

Usage

Within some Vue.js component:

JavaScript (ES6)

import Validation from 'vue-validator-util'

export default {
	data () {
		return {
			fields: [{
				name: 'some-field-name',
				label: 'My field label',
				value: null,
				validate: {
					required: {
						rule: true,
						message: 'The field is required'
					}
				}
			}]
		}
	},
	mixins: [
		Validation
	]
}

Template

<validator name="some-validator-name">
	<div v-for="field in fields" 
		class="form-group" 
		:class="{ 'has-error': hasValidationError(field.name, 'some-validator-name') }">
		
		<label :for="field.name">{{ field.label }}</label>
		<input type="text" class="form-control" 
			:id="field.name" 
			:field="field.name"
			v-model="field.value" 
			v-validate="field.validate" />
		
		<p class="help-block" v-for="msg in validationMessages(field.name, 'some-validator-name')">
			{{ msg }}
		</p>
	</div>
</validator>

Methods

getValidator(name)

Returns a vue-validator instance.

the default name value is $validation
the name is automatically transformed to camelCase and is also getting a $ prefix, so you can pass some-validator-name which will be translated to $someValidatorName

getValidatorField(fieldName, validatorName)

Returns a vue-validator field.

the fieldName is automatically transformed to camelCase, so passing some-validator-field-name will get translated to someValidatorFieldName
the validatorName is passed to getValidator

hasValidationError(fieldName, validatorName)

Check whether a vue-validator field is invalid. The field is considered invalid only when it's dirty and invalid properties are both true.

the fieldName is passed to getValidatorField
the validatorName is passed to getValidator

validationMessages(fieldName, validatorName)

Returns messages for a vue-validator field.

the fieldName is passed to getValidatorField
the validatorName is passed to getValidator

firstValidationMessage(fieldName, validatorName)

Returns the first message for a vue-validator field. Useful when trying to display a single message at a time.

the fieldName is passed to getValidatorField
the validatorName is passed to getValidator

Example

Assuming we have a field which is invalid for more than one rule (i.e. required and minlength), the following example will first display The field is required and after the required rule passes, it will display The field must have at least 10 characters..

data () {
	return {
		value: null,
		validate: {
			required: {
				rule: true,
				message: 'The field is required.'
			},
			minlength: {
				rule: 10,
				message: 'The field must have at least 10 characters.'
			}
		}
	}
}

Template:

<validator name="validation">
	<div class="form-group" 
		:class="{ 'has-error': hasValidationError('some-field-name') }">
		
		<label for="field-1">My label</label>
		<input type="text" class="form-control" 
			id="field-1" 
			field="some-field-name"
			v-model="value" 
			v-validate="validate" />
		
		<p class="help-block" v-if="hasValidationError('some-field-name')">
			{{ firstValidationMessage('some-field-name') }}
		</p>
	</div>
</validator>