npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-nice-validate

v3.2.5

Published

Vue validation library with directive and data based approch.

Downloads

71

Readme

Vue Nice Validate

VueNIceValidate is the light weight validation package. This package allows developers to full fill their basic requirements for form validation without heavy templating, heavy computaion and much code. You can validate single input, multiple inputs, single form or third party component with ease. You can easily access and modify field errors, rules and messages.

Here are some usefull links

  1. Documentation
  2. Demo
  3. Discord

This package is in early stage so feel free to make contribution and make this package better.

Installation

The latest version supports Vue3, install it via npm

npm install vue-nice-validate

If you want to use it with Vue2, then you can use

npm install vue-nice-validate@2

Usage

Basic Usage

The VueNiceValidate provide Vue3 composable function useVueNiceValidate you have to run this function to get tools(Array and functions) to perform validation in your page. For basic validation you need to import and use at least 4 entities, vValidate for using directive validateForm or validateInputs or validateInput to check if perticular input fields are valid w.r.t data. formErrors for showing errors in template

Import and use useVueNiceValidate

import {useVueNiceValidate} from 'vue-nice-validate';
const {vValidate, formErrors, validateForm, validationFields} = useVueNiceValidate();

Use as directive

You can add validation rules via v-validate directive for template usage

const { vValidate } = useVueNiceValidate();

//options api
export default {
	...
	directives: {
		"validate": vValidate,
	}, 
	...
}
<input id="email" :name="$t('email')" v-validate="'required|email'" />

The html element must contain id attribute. This id attribute must contain unique value which should reperesnt variable(reacive property) name. This package take rules from your directive in template and values from your reactive properties, And combine them with help of id attribute. so for let email = ref('') you can use <input id="email" /> for let loginForm = reactive({email:''}) you can use <input id="loginForm.email" /> for let userProfile = reactive({emails:[{email:''}]}) you can use <input id="userProfile.emails.0.email" />

use as Object

You can also add validation rules via function addValidationFields which accepts the following syntax

const { addValidationFields } = useVueNiceValidate();

const validationFields = {
	'email': {
		'rules': 'required|email',
		'field_name': $t('email'),
		'form_name': '', //optional
		'validate_all_rules': false, //optional
	}
}

addValidationFields(validationFields);

Check validation

const { validateForm } = useVueNiceValidate();
...
	async submit(){
		let is_form_valid = await validateForm(loginForm); 
		if(!is_form_valid){
			//form is invalid
			return false;
		}
		//form is valid
		//call api
	}
...

validateForm is a promise which resolves with boolean result, it can be used just before calling api, Or in 'onMounted' if you want to start validationg form and show errors on pageLoad This functions will add respective field errors to formErrors reactive array.

show Form Errors

declare formErrors

const { formErrors } = useVueNiceValidate();
//options api
export default {
	...
	data() {
		return {
			...
			formErrors: formErrors,
			...
		}
	}, 
	...
}

use formErrors

<input id="field_id" v-validate="'required'">
<span class="text-danger">{{ formErrors['field_id'] }}</span>

Message Formatter

If you are using internationalization or wants your custom validation messages to show instead of default ones, Then you can use messageFormatter option in ValidatePlugin

import {ValidatePlugin} from 'vue-nice-validate';
...
const messageFormatter = (rule, params)=>{
	return i18n.global.t(rule.toUpperCase(), params)
};
app.use(ValidatePlugin,{messageFormatter});
...

Validate selected input fields

To validate on selected input fields you can pass object containing only those fields.

const { validateForm } = useVueNiceValidate();
...
	async submit(){
		//composition API
		let is_form_valid = await validateForm( ()=>({email,password}) ); 
		//optional API
		let is_form_valid = await validateForm( ()=>({email:this.email}) ); 
		if(!is_form_valid){
			//form is invalid
			return false;
		}
		//form is valid
		//call api
	}
...

Validate multiple forms

To validate single form if you are using multiple forms in component, You need to pass form name as parameter in validateForm and formWatcher You need to mention form name in template and with field ids as well

<form>
	<input id="email" form="loginForm" v-validate="'required'"/>
	<span class="text-danger">{{ formErrors['loginForm#email'] }}</span>

	<input id="password"  v-validate:loginForm="'required'"/>
	<span class="text-danger">{{ formErrors['loginForm#password'] }}</span>
</form>
<form>
	<input id="email" form="registerForm" v-validate="'required'"/>
	<span class="text-danger">{{ formErrors['registerForm#email'] }}</span>

	<input id="password"  v-validate:registerForm="'required'"/>
	<span class="text-danger">{{ formErrors['registerForm#password'] }}</span>
</form>
const { validateForm } = useVueNiceValidate();
...
	let loginForm = reactive({email,password});
	async login(){
		if(!await validateForm(loginForm, 'loginForm')){
			//loginForm is invalid
			return false;
		}
		...
	}
	let registerForm = reactive({email,password});
	async register(){
		if(!await validateForm(registerForm, 'registerForm')){
			//registerForm is invalid
			return false;
		}
		...
	}
...

Manually Manage Errors

As formErrors is available as reactive property, you can play with it in case you want to add server error or custom errors.

const { formErrors } = useVueNiceValidate();
...
formErrors['email'] = 'This email is already registered. Please Login.';
...

Validate components with no id attribute

In most cases vue components pass id attribute or id props, this you can check by inspecting HTML elements in your browser but if you have a component with no id atrribute then you can pass it via validate-id prop. If both are not present you will get console error.