Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

Overview

Vue Computed Validator

Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

Table of Contents

  1. Documentation

    1. Installation
    2. How To Use It?
    3. Validation Rules
    4. Helper Functions
    5. Questions
  2. Support

  3. License

Documentation

Installation

npm:

npm install vue-computed-validator --save

CDN:

">

<script src="https://unpkg.com/[email protected]">script>

How To Use It?

First include it:

ES2015:

import Vue from 'vue';
import VueComputedValidator from 'vue-computed-validator';

Vue.use(VueComputedValidator);

Script:

">
<script src="path/to/vue.js">script>
<script src="path/to/vue-computed-validator.js">script>
<script>
Vue.use(VueComputedValidator);
script>

Then in your component initialization lifecycle hook that you use like beforeMount or created put the fieldsRules object like:

created: function () {
    this.fieldsRules = {
        email: ["isRequire", "isEmail"],
        password: ["isRequire", "isMinimum"],
        passwordConfirmation: ["isEqual"]
    };
}

The above code tells Vue Computed Validator general information about the fields that must care about and which rules must be implemented on each one. Here we tell Vue Computed Validator that there are three fields we want you to validate and these fields are email, password, and passwordConfirmation and tells it that the email must be required using isRequire rule and must be email using isEmail also the password is required and has a minimum requirements using isMinimum then finally the passwordConfirmation field must be equal to some value using isEqual rule.

Then in the computed properties section you give Vue Computed Validator the fields values using fieldsValues computed property like the following:

computed: {
    fieldsValues: function () {
        return {
            email: [this.email],
            password: [this.password, 6],
            passwordConfirmation: [this.password, this.passwordConfirmation]
        };
    }
}

Here we tell Vue Computed Validator from where should it take the fields values for example here we tell it that the value for the password field that we set it earlier take it from this.password property and this property could be computed or a data member property or form any other possible way.

Here is what will be done for the password field, first Vue Computed Validator will implement the first rule that we set it earlier for this field which it isRequire rule this rule expect one parameter which is the value of the field and here we give it the value from this.password property and Vue Computed Validator will implement the second rule which is isMinimum and this rule expect two parameters the field value and the limit and here Vue Computed Validator give isMinimum rule this.password as a value and 6 as a limit so the field value must be at least 6 characters length in order to be valid.

In the examples folder there is a working registration form sample you can take a look at it if you want.

Validation Rules

Vue Computed Validator does not have a lot of rules currently, however, please request any rule that you need and I'll add it ASAP with my pleasure.

  • isRequire: This rule expects one parameter and returns true if the parameter has a value and false otherwise.

  • isEmail: This rule expects one string parameter and returns true if the parameter is email and false otherwise.

  • isEqual: This rule expects two parameters and returns true if the parameters are equal and false otherwise.

  • isIqMobile: This rule expects one parameter and returns true if the parameter is Iraqi mobile number and false otherwise.

  • isIqZip: This rule expects one parameter and returns true if the parameter is Iraqi zip code and false otherwise.

  • isMaximum: This rule expects two parameters for example string or array for the first parameter and number for the second one and returns true if the first parameter has maximum that number of elements/characters and false otherwise.

    For example:

        isMaximum(["Mohammed", 8]) //return true
        
        isMaximum([[1, 2, 3, 4], 2]) //return false
  • isMinimum: This rule expects two parameters for example string or array for the first parameter and number for the second one and returns true if the first parameter has at least that number of elements/characters and false otherwise.

    For example:

        isMinimum(["Mohammed", 3]) //return true
        
        isMinimum([[1, 2, 3], 4]) //return false
  • isNotEqual: This rule expects two parameters and returns true if the parameters are not equal and false otherwise.

Helper Functions

The following functions you can use them in the template part as well as in your entire Vue component.

  • VCVisValid: This function checks whether a given field is valid or not.

    Example:

    VCVisValid('email') //use this in the template
    
    this.VCVisValid('email') //use this in the other component code
  • isAllValid: This function checks whether all the given fields are valid or not.

    Example:

    VCVisValid() //use this in the template
    
    this.VCVisValid() //use this in the other component code
  • touch: Use this function to touch a field.

    Example:

    @blur="touch('email')" //use this in the template
    
    this.touch('email') //use this in the other component code
  • dirt: Use this function to dirt a field.

    Example:

    @blur="dirt('email')" //use this in the template
    
    this.dirt('email') //use this in the other component code
  • isTouched: This function checks whether a given field is touched or not.

    Example:

    isTouched('email') //use this in the template
    
    this.isTouched('email') //use this in the other component code
  • isDirty: This function checks whether a given field is dirty or not.

    Example:

    isDirty('email') //use this in the template
    
    this.isDirty('email') //use this in the other component code
  • isAnyTouched: This function checks if any of the fields touched or not.

    Example:

    isAnyTouched() //use this in the template
    
    this.isAnyTouched() //use this in the other component code
  • isAnyDirty: This function checks if any of the fields dirty or not.

    Example:

    isAnyDirty() //use this in the template
    
    this.isAnyDirty() //use this in the other component code
  • untouchEverything: Use this function to untouch everything.

    Example:

    untouchEverything() //use this in the template
    
    this.untouchEverything() //use this in the other component code
  • cleanEverything: Use this function to clean everything(clean the dirty fields).

    Example:

    cleanEverything() //use this in the template
    
    this.cleanEverything() //use this in the other component code

Questions

Is there more examples about these rules?

Yes, in the tests folder there are a lot of examples for each rule.

What are these rules and where can I find them?

These rules are just a very simple validation function and you can find them in src/rules folder.

Support

You are welcome to contribute code and provide pull requests for Vue Computed Validator, also please feel free to suggest or request any features or enhancements.

License

Copyright (c) 2018 Mohammed Al-Mahdawi Licensed under the MIT license.

You might also like...
Results of small 30 min online coding challenge + small polishing afterwards. Vue JS login form + Express JS login endpoint with CORS middleware and validation of request

Install dependencies: npm -i install Start FE: npm run serve ./frontend/src/main.js Start BE: node ./backend/controller/index.js ToDo: tests docker-co

A Vue.js directive for sending data from form and primitive validation

Vue Form Send A Vue.js directive for sending data from form and primitive validation inputs Installation npm i --save-dev vue-form-send import VueForm

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api
Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api. (Form Api, Validator Api, Rules Api, Error Messages Api)

Another validation form for the Vue. Validates input fields of multiple forms and displays errors

vue-coe-validator ✅ Another validation form for the Vue. Validates input fields of multiple forms and displays errors. Note: without any dependencies.

Simple and easy Vue directive for form validation.
Simple and easy Vue directive for form validation.

Simple and easy Vue.js directive for form validation.

Asynchronous form handling and validation for VueJS forms

Asynchronous form handling and validation for VueJS forms

✅  Form Validation for Vue.js
✅ Form Validation for Vue.js

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or u

Form validation for Vue.js 2.2+

vue-form Form validation for Vue.js 2.2+ Install Available through npm as vue-form. import VueForm from 'vue-form'; // or var VueForm = require('vue-f

Vue form components with server-side validation in mind
Vue form components with server-side validation in mind

Vue form components with server side validation in mind About FormVuelar is a set of predefined vue form components which are designed to automaticall

Owner
Mohammed Al-Mahdawi
Mohammed Al-Mahdawi
Vue Composition API for validating form.

Vue Composition API for validating form.

vue-use-form 84 Nov 13, 2022
HTML validation using html-validate for NuxtJS

HTML validation using html-validate for NuxtJS

Nuxt Community 90 Nov 22, 2022
Form Validation in Vue3 with TypeScript along with vuelidate for the validation

Vue3 with typescript Form Validation in Vue3 with vuelidate library Node Version Used: v14.17.3 Library Used for the validation: Vuelidate 2 Demo Link

Sandeep Kumar Mandal 4 Oct 10, 2022
Vue 3 Hooks for consuming, validating and managing Forms.

@casthub/form provides Vue 3 Hooks for consuming, validating and managing Forms.

CastHub 20 Nov 22, 2022
Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data

Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data. #install npm i vue-laravel-validator -

Metin Seylan 58 Aug 23, 2022
Vue props validation logic extracted for nested validation in object and arrays.

vue-props-validation Vue props validation logic extracted for nested validation in object and arrays. Install npm install vue-props-validation Usage Y

Rubén Valseca 21 Feb 28, 2022
Sirius Validation - stand-alone JS library for data validation in Node and browsers.

SiriusJS Validation Sirius Validation is stand-alone JS library for data validation in Node and browsers. It offers: 23 build-in validation rules. The

Adrian Miu 1 Mar 24, 2020
RawModel.js plugin for Vue.js v2. Form validation has never been easier!

vue-rawmodel RawModel.js plugin for Vue.js v2. Form validation has never been easier! This plugin integrates RawModel.js framework into your Vue.js ap

Kristijan Sedlak 81 Nov 24, 2022
Vue data validation rules, very much inspired from Laravel validation

A Vue plugin that provides out-of-the-box data validation rules, very much inspired from Laravel validation system. Installation npm i @primitivesocia

Primitive. 15 Apr 13, 2022
Vue.js 2 form component that integrates jQuery Validation and Axios.

vue-vform Vue.js 2 form component that integrates jQuery Validation and Axios. Install Yarn yarn add vue-vform --dev NPM npm install vue-vform --save-

Jose Quintana 15 Nov 24, 2022