# @devsun/vue3-validation-inputs

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

Latest version **0.0.1** (published 2023-02-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @devsun/vue3-validation-inputs
pnpm add @devsun/vue3-validation-inputs
yarn add @devsun/vue3-validation-inputs
bun add @devsun/vue3-validation-inputs
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-02-17 |
| First published | 2023-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 76.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | devsun |

## Links

- npm: https://www.npmjs.com/package/@devsun/vue3-validation-inputs
- npm.io page: https://npm.io/package/@devsun/vue3-validation-inputs

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.45

## Recent versions

- 0.0.1 (latest) — 2023-02-17

## README

# 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

```sh
npm i @devsun/vue3-validation-input
```

And dependencies to your `main.ts`:

```typescript
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:

```vue
<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:

```vue
<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**<br />Options of the checkbox, radio, select                   |
| labelKey           | String                                                                                                   |         | Checkbox, Radio, Select        | **Required**<br />Key used as label in the option                          |
| valueKey           | String                                                                                                   |         | Checkbox, Radio, Select        | **Required**<br />Key used as value in the option                          |
| mode               | 'default' \| 'button'                                                                                    | default | Checkbox, Radio                |                                                                            |

## API

#### validateData

(refs: Ref[]) => boolean

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

#### validateDataRef

(refs: Ref[]) => boolean

```typescript
// 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:

```typescript
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,
});
```

---
_Source: https://npm.io/package/@devsun/vue3-validation-inputs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._