Simple and easy Vue directive for form validation.

Overview

vue-mandatory

Simple and easy Vue.js directive for form validation.

Steps

  1. Install it
  npm install --save vue-mandatory

  yarn add vue-mandatory
  1. Import the library and use it as Vue plugin.
  import vueMandatory from 'vue-mandatory'

  Vue.use(vueMandatory)
  
  1. Basic usage.
    • Use the directive v-mandatory in your HTML form elements.
    • The directive v-mandatory receive an object as value.
    • Mandatory each HTML form element must have an id property setted.
    • Optional params:
      • msg: String type. Is the message displayed if an element is required. If the msg is not supplied, the default value is ${elementId} is required
      • len: Number type. Is the minimum length required. Apply only for inputs. If the len is not supplied, the default value is 1.
      • pattern: Regex type. If a pattern is setted the input value must match the pattern for be valid.
      • inputClasses: Array of clases that will be apply to the input element in case of non-compliance.
      • warningClasses: Array of clases that will be apply to message element in case of non-compliance. The message element is build with an p tag and is append below the input element.
    • You can assing an object, with the custom fields, as value of the v-mandatory directive such as the email and password inputs in the following example.
    • You can assign custom values directly such as username input.
    • or only use without values such as gender select. In this way you will get the defaults values based on TailwindCSS for the styles.
... ">
 <template>
   ...
   <div class="mb-4">
    <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
      Username
    label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
      id="username"
      type="text"
      placeholder="jhonDoe"
      v-model="form.username"
      v-mandatory="{ msg: 'My custom message here', len: 5, pattern: /[a-zA-Z]{5, 10}/i inputClasses: ['error'], warningClasses: ['background-red', 'text-bold'] }"/>
  div>
  <div class="mb-4">
    <label class="block text-grey-darker text-sm font-bold mb-2" for="email">
      Email
    label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
      id="email"
      type="email"
      placeholder="[email protected]"
      v-model="form.email"
      v-mandatory="{ inputClasses: validate.inputClasses, warningClasses: validate.warningClasses, ...validate.email }" />
  div>
   <div class="mb-6">
    <label class="block text-grey-darker text-sm font-bold mb-2" for="password">
      Password
    label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
      id="password"
      type="password"
      placeholder="******************"
      v-model="form.password"
      v-mandatory="{inputClasses: validate.inputClasses, warningClasses: validate.warningClasses, ...validate.password}" />
  div>
  <div class="mb-6">
    <label class="block text-grey-darker text-sm font-bold mb-2" for="password">
      Gender
    label>
    <select
      class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
      id="gender"
      v-model="form.gender"
      v-mandatory>
        <option value="">Choose oneoption>
        <option value="male">Maleoption>
        <option value="female">Femaleoption>
        <option value="other">Otheroption>
    select>
    div>
   ...
 template>
 <script>
   export default {
     ...,
     data () {
       return  {
         validate: {
           email: {
             msg: 'The Email Field is required',
             pattern: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/i
           },
           password: {
             msg: 'Password is mandatory',
             len: 6
           },
           gender: {
             msg: 'Choose one gender'
           },
           inputClasses: ['border-red'],
           warningClasses: ['mt-3', 'text-red', 'text-xs', 'italic']
         }
       }
     },
     ...
   }
 script>
  1. In case you want to used in a custom component.
">

<template>
  <div class="mb-4">
    <label class="block text-grey-darker text-sm font-bold mb-2" :for="id">
      {{ label }}
    label>
    <div class="wrap-input">
      <input
        class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
        type="email"
        v-bind="$attrs"
        v-on="$listeners"
        @input="event => $emit('input', event.target.value)"
      />
    div>
  div>
template>

<script>
  export default {
    inheritAttrs: false
  }
script>
">

<template>
  <MyInput
    id="email"
    placeholder="[email protected]"
    v-model="form.email"
    label="Email"
    v-mandatory="{ inputClasses: validate.inputClasses, warningClasses: validate.warningClasses, ...validate.email }"
  >
template>

License

MIT © Edward S. Ramos

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

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.

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

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

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

Vue composition function for Form Validation

Form Validation for Vue 3 Vue composition function for Form Validation with async rules. 🌌 Written in TypeScript 🌊 Dynamic Form support 🍂 Light wei

Owner
Edward S. Ramos
Developer by passion
Edward S. Ramos
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

Aleksey Pleshkov 3 Apr 13, 2022
Flexible Vue.js form validation directive

Vue form validator A Vue.js directive for form validation Installation npm instal vue-smart-validator --save Getting Started In your scirpt entry poi

mlxiao93 7 Nov 20, 2018
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
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
Simple Vue.js form validation library

Simple Vue.js form validation library

null 0 Mar 1, 2020
Deadly simple form validation for Vue.js

vue-form-validator Deadly simple form validation for Vue.js. Features: Built in data types, including email, number, domain, url, etc. Customizable va

Wenbo 10 Aug 28, 2018
Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

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

Mohammed Al-Mahdawi 1 May 7, 2019
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