validation-vue v1.1.7

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

Input Properties

Properties define the behavior of the v-input component:

Select Properties

Properties define the behavior of the v-select component:

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