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