@devsun/vue3-validation-inputs

Vue3 Validation Input

vue3-validation-input is very simple and tiny library for vue3.

It was based on Vue3, typescript, and composition API with <setup>

Setup

npm i @devsun/vue3-validation-input

And dependencies to your main.ts:

import Vue3ValidationInput from '@devsun/vue3-validation-input';

const app = createApp({...});
app.use(Vue3ValidationInput);

Usage

Component

You can use <validtation-input />, <validtation-checkbox/>, <validtation-radio/> ,<validtation-select/>

use validation component:

<validation-input
  v-model="form.name"
  required
  invalid-required-msg="Please enter your name"
>
</validation-input>

Validation

You can validate data using API.

ref should be added for eash component.

use Composition API style:

<script lang="ts" setup>
import { IValidation } from '@devsun/vue3-validation-input';

const $validation = <IValidation>inject('$validation');
const nameRef = ref(null);

function validate() {
  const result = $validation.validate([nameRef]);
  // if the result is true, validation comleted, and if it is false, invalid.
}
</script>
<template>
  <validation-input
    ref="nameRef"
    v-model="form.name"
    required
    invalid-required-msg="Please enter your name"
  >
  </validation-input>
</template>

Attributes

Name	Type	Default	Target	Description
ref	String		Input, Checkbox, Radio, Select	used for validation API call
v-model	String, Number, Boolean, Array		Input, Checkbox, Radio, Select	Required
required	Boolean	false	Input, Checkbox, Radio, Select
disabled	Boolean	false	Input, Checkbox, Radio, Select
reactive	Boolean	true	Input, Checkbox, Radio, Select	Whether to validate when input, blur event occurs
showInvalidMsg	Boolean	true	Input, Checkbox, Radio, Select	Whether to show invalid message under the input
format	String, RegExp		Input
invalidRequiredMsg	String		Input, Checkbox, Radio, Select	Displayed message when required attribute is true and no value entered
invalidFormatMsg	String		Input	Displayed message when format attribute is exsits and invalid format
type	'text' | 'password' | 'number' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color'	text	Input
placeholder	String		Input, Select
maxlength	String, Number		Input
min	String, Number		Input	Minimum value when type is number, date, datetime-local, month, week, time
max	String, Number		Input	Maximum value when type is number, date, datetime-local, month, week, time
options	Array		Checkbox, Radio, Select	Required Options of the checkbox, radio, select
labelKey	String		Checkbox, Radio, Select	Required Key used as label in the option
valueKey	String		Checkbox, Radio, Select	Required Key used as value in the option
mode	'default' | 'button'	default	Checkbox, Radio

API

validateData

(refs: Ref[]) => boolean

// if result is true, validation completed, if it is false, exist invalid data.
const result = $validation.validateData([nameRef, emailRef]);

validateDataRef

(refs: Ref[]) => boolean

// Return invalid refs
const invalidRefs = $validation.validateDataRef([nameRef, emailRef]);

// You can use the invalid message as a notification like alert
// and  focus on invalid form
if (invalidRefs.length > 0) {
  window.alert(invalidRefs[0].value.invalidMsg);
  invalidRefs[0].value.focus();
  return;
}

Plugin Options

Configure the plugin using a global options:

app.use(Vue3ValidationInput, {
  // provide / inject with this key.
  key: '$validation',

  // Whether to validate when `input, blur` event occurs
  reactive: true,

  // Whether to show invalid message under the input
  showInvalidMsg: true,
});