Validation Vue

Validation-Vue is a powerful Vue.js package that provides components for form validation, including Form, Input, and Select. These components enable you to easily implement form validation logic in your Vue.js applications, ensuring data integrity and enhancing user experience.

Features

• Form Component: The Form component serves as a wrapper for your form elements, providing a convenient way to manage the form's state and trigger form submission. It emits a "submitForm" event when the form is submitted, providing a boolean parameter indicating whether the form is valid based on the defined validation rules.
• Input Component: The Input component is a versatile input field that supports various input types such as text, email, phone, credit card, and textarea. It provides real-time validation feedback to the user, allowing you to define validation rules for each input field. The supported validation rules include required fields, minimum and maximum lengths, pattern matching, and more. Additionally, the Input component supports both function-based validations and validation names, allowing you to easily implement custom validation logic. It also supports asynchronous validation, enabling you to perform validation checks that require server-side or asynchronous operations. As the library evolves, more input types and validation options will be added to enhance its versatility.
• Select Component: The Select component is an enhanced custom select input with additional features. It not only allows users to select options from a dropdown but also provides a search functionality for easily finding desired options. It also supports validation to ensure a valid selection is made.
• Extensibility: The Validation-Vue package is designed to be easily extendable, allowing you to add more components and validation rules to suit your specific requirements. You can create your custom components and integrate them seamlessly into the validation framework.

Prerequisites

This project requires NodeJS (version 12 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
8.11.0
v16.15.1

Table of Contents

• Features
• Getting Started
• Installation
• Usage
  • Local Usage
  • Global Usage
• Form Events
• Properties
  • Shared Properties
  • Input Properties
  • Select Properties
• Examples
• Contribution
• Authors
• License

Getting Started

Follow these steps to get started with the project:

Installation

BEFORE YOU INSTALL: please read the prerequisites

To install and set up the library, run:

$ npm install validation-vue

Or if you prefer using Yarn:

$ yarn add validation-vue

Usage

Local Usage

my-component.vue

<template>
  <div>
    <v-form @submitForm="onSubmit" @submitStart="onSubmitStart" @submitFailed="onSubmitFailed">
      <v-input :idx="0" id="input" v-model="name" required/>
      <v-select :idx="1" id="select" v-model="count" :options="[1, 2, 3]" required/>
      <v-input :idx="2" id="input" v-model="email" :rules="['email']" required />
      <button type="submit">Submit</button>
    </v-form>
  </div>
</template>
<script>
import { VInput, VSelect, VForm } from 'validation-vue'

export default {
  data() {
    return {
      name: '',
      count: 0,
      email: '',
    }
  },
  methods: {
    onSubmit(event) { 
      // - event - The submit event object

      // Handle form submission
    },
    // If needed you can use start or failed events
    onSubmitStart() {
      // for example - this.isLoading = true
    },
    onSubmitFailed() {
      // Do something
    },
  },
  components: {
    VForm,
    VInput,
    VSelect
  }
}
</script>

Global Usage

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import { VForm, VInput, VSelect } from 'validation-vue'

const app = createApp(App)
app.component('VForm', VForm)
app.component('VInput', VInput)
app.component('VSelect', VSelect)

app.mount('#app')

Form Events

The <VForm> component emits the following event:

• @submitForm: Emitted when the form is submitted and the form valid.
• @submitFailed: Emitted when the form is submitted and the form is not valid.
• @submitStart: Emitted when start form submition. This event can be used to trigger actions such as showing a loading indicator or disabling the form during submission.

Properties

Shared Properties

| Property | Type | Default | Description | | ------------------ | ---------- | -------------- | ---------------------------------------------- | | id | String | required | The unique identifier for the component. | | required | Boolean | false | Indicates whether the input / select is required. | | primaryColor | String | '#005FAA' | The primary color for the field. For example, you can use this color to change the color of the show-password icon. | | errorColor | String | '#c10015' | The color to indicate an error state in the component. |

Input Properties

Properties define the behavior of the v-input component:

| Property | Type | Default | Description | | ------------------ | ---------- | -------------- | ----------------------------------------------------------- | | type | String | 'text' | The type of input. | | placeholder | String | '' | The placeholder text for the input. | | label | String | '' | The label text for the input. | | readonly | Boolean | false | Readonly input | | preventFocus | Boolean | false | Indicates whether to prevent focus in readonly mode | | focus | Boolean | false | When changing 'focus' to true the input is focused | | autofocus | Boolean | false | Indicates whether the input is focused when mounted | | rules | Array | [] | The rules prop is an array of validation rules that can be applied to the input or select component. It allows you to specify various validation conditions to validate the entered value. The rules can be defined either as strings or as pointers to validation functions from the parent element. When using strings, you can provide names of pre-defined validation options such as 'required', 'email', 'cc', 'minLength:6', 'maxLength:10' etc. These validation options represent common validation rules that can be applied to the input. Alternatively, you can define custom validation rules using pointers to validation functions from the parent element. Each validation function should take the value as a parameter and return an object with two properties: isValid and errorMessage. isValid indicates whether the value passes the validation condition, and errorMessage provides the error message to display when the validation fails. Here's an example: rules: [(value) => ({ isValid: /[A-Z]/.test(value), errorMessage: 'Password must contain at least 1 uppercase character' })] | | asyncRule | Function | null | A pointer to an asynchronous validation function. Please refer to Async Example below for an illustration of the asyncRule usage. | | submitRule | Function | null | A pointer to an asynchronous validation function. Run a specific check on the data, but only when submitting the form. By default, after the first submission, it will continue to check on input. | | validateOnSubmitOnly | Boolean | false | If there is a submit rule defined and you want the validation to occur only when submitting the form, set this prop to true. This will ensure that the submit rule is checked for validation only during form submission, even after the first submission. | | showValidIcon | Boolean | false | Indicates whether to show a valid icon. | | showPasswordIcon | Boolean | false | Indicates whether to show a password icon. | | required | Boolean | false | Indicates whether the input is required. | | isChecklist | Boolean | false | Indicates whether the input has a checklist of validations. | | isChecklistGrid | Boolean | true | Indicates whether to use a grid layout for checklist items. | | hideAsterisk | Boolean | false | Indicates whether a red asterisk (*) should not be displayed next to the label as a visual indicator of a required field. (By default the asterisk is shown). | | isDigitsOnly | Boolean | false | Indicates whether the input should accept only digits. | | maxLength | Number | Infinity | The maximum number of characters allowed in the input. | | minLength | Number | 0 | The minimum number of characters required in the input. | | textareaRows | Number | 0 | The number of rows for a textarea input. | | errorColor | String | '#c10015' | The color of the error message and error icon. | | validColor | String | '#7CB261' | The color of the success icon. | | placeholderColor | String | '#7B97AC' | The color of the placeholder text. |

Select Properties

Properties define the behavior of the v-select component:

| Property | Type | Default | Description | | ------------------ | ---------- | -------------- | -------------| | options | Array | [] | An array of options for the Select component. The options can either be primitive values (e.g. [1,2,3] or ['USA', 'Canada', 'Israel']) or objects with { label: '', key: '' } structure. | | iconColor | String | '#005FAA' | The color of the arrow icon. | | bgColor | String | '#fff' | The backgroung color of the select. | | selectLabel | String | '' | The label for the select component. | | isInsideLabel | Boolean | false | Determines if the label should be inside the select box. | | defaultOption | Object | { label: 'Choose', key: '' } | The default option for the select component. | | isSearch | Boolean | false | Determines if a search functionality should be enabled. |

Examples

Async Example

<template>
  <VInput :idx="0" id="input" v-model="name" :asyncRule="validateAsync"/>
</template>
<script>
import { VInput } from 'validation-vue'
export default {
  data() {
      return {
          name: '',
      }
  },
  methods: {
  validateAsync(val) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
            isValid: val.includes('123'),
            errorMessage: 'Username must include 123',
          })
      }, 2000)
    })
  },
},
  components: { VInput }
}
</script>

Contribution

Contributions to the Validation-Vue package are welcome! If you find any issues or have suggestions for improvement, please open an issue on the GitHub repository or submit a pull request.

This task will create a distribution version of the project inside your local dist/ folder

Authors

• Dvir Cohen - Initial work - Dvirco1234

License

MIT License © Dvir Cohen