Package Exports

vuejs-easy-validator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuejs-easy-validator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vuejs-easy-validator

A useful form validator for VueJS framework

Introduction

Suppose you work with VueJS framework.
Imagine a form with a lot of fields.
You need to write methods, check functions, computed state property... for each field.
For you : vuejs-easy-validator

Getting started

Import package in your app or in your SFC component :

// Works with Vue
import Vue from 'vue'
// Import (only class)
import Validator from 'vuejs-easy-validator'
// Import with 'map' functions
import { Validator, mapFieldStates, mapFieldCheckers } from 'vuejs-easy-validator'
// ...

Usage

Basic example

Use validator to check form

HTML template

<template>

    <form method="post" action="/articles" @submit="handleSubmit">

        <label for="articleTitle">Title :</label>
        <input v-model="form.validator.fields.title.value" 
               id="articleTitle" 
               type="text" 
               name="title" 
               placeholder="Article title"/>

        <label for="articleContent">Content :</label>
        <input v-model="form.validator.fields.content.value" 
               id="articleContent" 
               type="text" 
               name="content" 
               placeholder="Article content" />

        <input type="submit" name="submit" value="Save" />

    </form>

</template>

Javascript

import Validator from 'vuejs-easy-validator'
export default {
    data() {
        return {
            form: {
                // Empty object for validator
                validator: {},
                // Field definitions
                defs: [
                    // Article title
                    { name: 'title', value: '', verify: 'required|string|max:255' },
                    // Article content
                    { name: 'content', value: '', verify: 'string' }
                ]
            }
        }
    },
    methods: {
        handleSubmit: function (evt) {
            if ( this.form.validator.isValid() ) {
                console.log("Success!")
            }
            else {
                console.log("Ooops... an error has occurred!")
            }
            evt.preventDefault() // Prevent form from submitting
        }
    },
    created() {
        // You need to init form when component is 'created'
        this.form.validator = new Validator(this.form.defs)
    }
}

Example with 'map' functions

HTML template

Use 'map' functions to generate automatically computed properties and check methods

<template>

    <form @submit="handleSubmit">

        <label for="articleTitle">Title :</label>
        <input v-model="form.validator.fields.title.value" 
               id="articleTitle" 
               type="text" 
               name="title" 
               placeholder="Article title"/>
        <p v-if="titleState">OK! The title is valid!</p>
        <p v-else>Article must have a title! (max: 255)</p>

        <label for="articleContent">Content :</label>
        <input v-model="form.validator.fields.content.value" 
               id="articleContent" 
               type="text" 
               name="content" 
               placeholder="Article content" />
        <p v-if="titleState">OK! The content is valid!</p>
        <p v-else>Article must have a content!</p>

        <label for="articleAuthorId">Author ID :</label>
        <input v-model="form.validator.fields.authorId.value" 
               id="articleAuthorId" 
               type="number" 
               name="authorId" 
               placeholder="Article author ID" />
        <p v-if="authorIdState">OK! The author ID is valid!</p>
        <p v-else>Article must have an author ID!</p>

        <input type="submit" name="submit" value="Save" />

    </form>

</template>

Javascript

import { Validator, mapFieldStates, mapFieldCheckers } from 'vuejs-easy-validator'  
export default {
    data() {
        return {
            form: {
                // Empty object for validator
                validator: {},
                // Field definitions
                defs: [
                    // Article title
                    { name: 'title', value: '', verify: 'required|string|max:255' },
                    // Article slug
                    { name: 'slug', value: '', varify: function(value) {
                        if ( /* value.match( new RegExp( "^([a-z0-9]|[a-z0-9]+-([a-z0-9]+-)*[a-z])$" ) ) */ ) { // preg match slug
                            return true 
                        }
                        else {
                            return false
                        }
                    } },
                    // Article content
                    { name: 'content', value: '', verify: 'required|string' },
                    // Article author ID
                    { name: 'authorId', value: null, verify: 'required|number|min:1' }
                ]
            }
        }
    },
    computed: {
        // This function return computed method for each given field. See below
        ...mapFieldStates( {
            ref: 'this.form.validator',
            fields: [ 'title', 'content', 'authorId' ] // -> titleState, contentState, authorIdState
        } ),
    },
    methods: {
        // This function return check method for each given field. See below
        ...mapFieldCheckers( {
            ref: 'this.form.validator',
            fields: [ 'title', 'content', 'authorId' ] // -> titleChecker, contentChecker, authorIdChecker
        } ),
        handleSubmit: function (evt) {
            if ( this.form.validator.isValid() ) {
                axios.post( '/articles', this.validator.output )
                     .then( (response) => {
                         console.log("Success!")
                     } )
                     .catch( (error) => {
                         console.log("Error!")
                     } )
            }
            else {
                console.log("Ooops... an error has occurred!")
                this.form.validator.errors.forEach( (fieldWithErrors) => {
                    console.log("----")
                    console.log("Error in : '" + fieldWithErrors.field.name + "' field ")
                    fieldWithErrors.errors.forEach( (error) => {
                        console.log("- for '" + error.prop + "', in '" + error.method + "' method : " + error.text )
                    } ) 
                } )
            }
            evt.preventDefault() // Prevent form from submitting
        }
    },
    created() {
        // You need to init form when component is 'created'
        this.form.validator = new Validator(this.form.defs)
    }
}

Enjoy! ... and sorry for my english ^^