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 | RequiredOptions of the checkbox, radio, select | | labelKey | String | | Checkbox, Radio, Select | RequiredKey used as label in the option | | valueKey | String | | Checkbox, Radio, Select | RequiredKey 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,
});