Quick-v Form Validation Vue Components

QuickvInput Component

The QuickvInput component is a Vue input field with quick validation capabilities.

Usage

To use the QuickvInput component, simply import it into your Vue application and include it in your page:

<script setup >
	import QuickvInput from "@/components/QuickvInput"
</script>
<template>
    <form>
      <QuickvInput
          inputId="age"
          inputName="myInputAge"
          type="number"
          fieldPlaceholder="Age" 
          label="Age"
          qvRules='required|number|between:18,35'
          qvMessages='age is required | invalid number| number between 18 and 35'
          qvInvalidClass='border border-red-500'
          qvValidClass='border border-green-500'
          v-model="formData.age"
        />
    </form>
</template>

Props

The QuickvInput component accepts the following props:

Name Type Required Description
label string true The label content for the input field.
qvRules string true The quick validation rules separated by|
qvMessages string true The quick validation rules separated by|
inputName string true The name of the input field and associated label.
qvInvalidClass string false The CSS class to apply when the input field is invalid.
qvValidClass string false The CSS class to apply when the input field is valid.
feedbackClass string false The CSS class to apply to the div for displaying quick validation feedback.
fieldPlaceholder string false The placeholder text for the input field.

Others Rules

Validation Rules The following validation rules are supported by the QuickvInput component:

  • required: this rule ensures that the input field is not empty
  • min:value1,value2: this rule ensures that the input value is greater than or equal to the minimum value(s) specified. Multiple minimum values can be specified by separating them with commas.
  • max:value1,value2: this rule ensures that the input value is less than or equal to the maximum value(s) specified. Multiple maximum values can be specified by separating them with commas.
  • contains:value: this rule ensures that the input value contains the specified substring.
  • minlength:minvalue: this rule ensures that the length of the input value is greater than or equal to the specified minimum value.
  • maxlength:maxvalue: this rule ensures that the length of the input value is less than or equal to the specified maximum value.
  • url: this rule ensures that the input value is a valid URL.
  • in:value1,value2,value3,value4…: this rule ensures that the input value is included in the specified list of values.

QuickvForm Component

The QuickvForm component is a form wrapper component that can contain QuickvInput components as children. It provides an easy way to validate and submit form data.

Usage

<script setup>
  import QuickvSubmitButton from '@/components/QuickvSubmitButton.vue'
  import { onMounted } from 'vue'
  import  *  as  quickv  from  "quickv"

  onMounted(() => {
    const qv = new quickv.Quickv()
    qv.init()
  })

  const props = defineProps({
    formId:{
      type:Number,
      required:true
    },
    formName:{
      type:String,
      required:true
    },
    submitButtonText: {
      type:String,
      required:false,
      default:'submit form'
    }
  })


  const handleSubmit = function() {
    console.log("handleSubmit")
  }
</script>
<template>
  <form :id="props.formId" :name="props.formName" @submit.prevent="handleSubmit">
    <slot></slot>
    <div class="text-center">
      <quickv-submit-button :submitButtonText='submitButtonText' > 
        {{ props.submitButtonText }}
       </quickv-submit-button > 
    </div>
   </form>
</template>

<style  scoped>

</style>

Props

The QuickvForm component accepts the following props:

Name Type Required Description
formName string false The name of the form. Must be unique within the page.
formId string false The id of the form. Must be unique within the page.
submitButtonText string false The text to display on the submit button.

Example

<script setup>
  import {reactive} from 'vue'
  import QuickvForm from '@/components/QuickvForm.vue'
  import QuickvInput from '@/components/QuickvInput.vue'

  const formData = reactive({
    firstName:'',
    lastName:'',
    email:'',
    phoneNumber:'',
    age:'',
    password:''
  })
  


</script>
<template>
  <div>
    <quickv-form formId="authForm" name="myAuthForm">
      <div class="grid grid-cols-2 gap-4 container mx-auto my-4">
        <QuickvInput
          inputId="firstName"
          inputName="myInputFirstName"
          fieldPlaceholder="firstName" 
          label="firstName"
          qvRules='required|minlength:3|maxlength:20'
          qvMessages='The firstname is required | The name should be at least 3 characters | The field size should not exceed 20 characters'
          qvInvalidClass='border border-red-500'
          qvValidClass='border border-green-500'
          v-model="formData.firstName"
        />
        <QuickvInput
          inputId="lastName"
          inputName="myInputLastName"
          fieldPlaceholder="lastName" 
          label="lastName"
          qvRules='required|minlength:3|maxlength:20'
          qvMessages='The lastname is required | The name should be at least 3 characters | The field size should not exceed 20 characters'
          qvInvalidClass='border border-red-500'
          qvValidClass='border border-green-500'
          v-model="formData.lastName"
        />
        <QuickvInput
          inputId="email"
          inputName="myInputEmail"
          type="email"
          fieldPlaceholder="Email" 
          label="email"
          qvRules='required|email'
          qvMessages='The email is required | invalid email'
          qvInvalidClass='border border-red-500'
          qvValidClass='border border-green-500'
          v-model="formData.email"
        />
        <QuickvInput
          inputId="phoneNumber"
          inputName="myInputPhone"
          type="number"
          fieldPlaceholder="PhoneNumber" 
          label="phoneNumber"
          qvRules='required|number'
          qvMessages='The phoneNumber is required | invalid number'
          qvInvalidClass='border border-red-500'
          qvValidClass='border border-green-500'
          v-model="formData.phoneNumber"
        />
        <QuickvInput
          inputId="age"
          inputName="myInputAge"
          type="number"
          fieldPlaceholder="Age" 
          label="Age"
          qvRules='required|number|between:18,35'
          qvMessages='age is required | invalid number| number between 18 and 35'
          qvInvalidClass='border border-red-500'
          qvValidClass='border border-green-500'
          v-model="formData.age"
        />
        <QuickvInput
          inputId="password"
          inputName="myInputPassword"
          type="password"
          fieldPlaceholder="Password" 
          label="password"
          qvRules='required|password'
          qvMessages='password is required |invalide password'
          qvInvalidClass='border border-red-500'
          qvValidClass='border border-green-500'
          v-model="formData.password"
        />
      </div>


    </quickv-form>

  </div>
</template>

<style  scoped>

</style>

License

This project is licensed under the MIT License. See the LICENSE file for details.

Credits

These components were developed by Gomez jacob in collaboration with Claude Fassinou for Quick-v.

Demo : Quick-v Demo

GitHub

View Github