Form validation can be challenging, but this tutorial simplifies the process using Vuelidate. Vuelidate offers a streamlined approach, minimizing complexity and maximizing flexibility. This tutorial provides a starting point; you can adapt it to your specific needs. A complete, working example is included at the end for those who prefer a quick implementation.

For those wanting a deeper understanding, let's begin with a simple scenario and gradually build a more robust example. We'll also cover how to effectively display form errors upon submission.

Basic Example: Real-time Input Feedback

Let's explore Vuelidate's functionality. We'll create a validations object mirroring our form's data structure. A basic example:

data: {
  name: ''
},
validations: {
  name: {
    required
  }
}

Vue DevTools will reveal a computed property, $v, containing validation information. Key aspects to note: $v is a cached computed property, enhancing performance. It contains nested objects: a general validation object and property-specific objects. This structure allows access to both overall and individual field validation details.

Observe the behavior when typing into the input field: $dirty indicates whether the field has been interacted with; $model reflects the current input value; $error and $invalid represent error states (with $error considering both $invalid and $dirty).

Setting up Vuelidate and Implementing Validation Rules

Let's create a practical example. We'll install Vuelidate and add required and minLength validation rules.

First, install Vuelidate:

yarn add vuelidate

Next, update main.js:

import Vue from 'vue';
import Vuelidate from "vuelidate";
import App from './App.vue';
import store from './store';

Vue.use(Vuelidate);
Vue.config.productionTip = false

new Vue({
 store,
 render: h => h(App)
}).$mount('#app')

In your component, import the validators:

import { required, minLength } from 'vuelidate/lib/validators'

Encapsulate your data within a function for reusability:

import { required, minLength } from 'vuelidate/lib/validators'

export default {
 data() {
   return {
     formResponses: {
       name: '',
     }
   }
 },
 validations: {
   formResponses: {
     name: {
       required,
       minLength: minLength(2)
     },
   }
 }
}

In your template, use $v in conjunction with v-model for data binding and display error messages:

<template>
  <div>
    <label for="fname">Name*</label>
    <input type="text" v-model="$v.formResponses.name.$model" id="fname">
    <p class="error" v-if="!$v.formResponses.name.required">This field is required</p>
    <p class="error" v-if="!$v.formResponses.name.minLength">Field must have at least {{ $v.formResponses.name.$params.minLength.min }} characters.</p>
  </div>
</template>

<style scoped>
.error {
  color: red;
}
</style>

Delayed Validation with v-model.lazy

For a less disruptive user experience, utilize v-model.lazy to trigger validation only after the input loses focus:

<input type="text" v-model.lazy="$v.formResponses.name.$model" id="fname">

Creating Custom Validators

Vuelidate allows creating custom validators. Let's build one for strong passwords and integrate it with sameAs for password confirmation.

Add password fields to your data:

data() {
  return {
    formResponses: {
      name: null,
      email: null,
      password1: null,
      password2: null
    }
  };
},

Create a custom strongPassword validator:

validations: {
  formResponses: {
    password1: {
      required,
      strongPassword: (password1) => {
        return /[a-z]/.test(password1) && /[0-9]/.test(password1) && /\W|_/.test(password1) && password1.length >= 6;
      }
    },
    password2: {
      required,
      sameAsPassword: sameAs('password1')
    }
  }
}

Add the password fields and error messages to your template:

<label for="fpass1">Password*</label>
<input type="password" v-model="$v.formResponses.password1.$model" id="fpass1">
<p class="error" v-if="!$v.formResponses.password1.required">This field is required</p>
<p class="error" v-if="!$v.formResponses.password1.strongPassword">Password must contain at least one lowercase letter, one number, one special character, and be at least 6 characters long.</p>

<label for="fpass2">Confirm Password*</label>
<input type="password" v-model="$v.formResponses.password2.$model" id="fpass2">
<p class="error" v-if="!$v.formResponses.password2.required">This field is required</p>
<p class="error" v-if="!$v.formResponses.password2.sameAsPassword">Passwords do not match.</p>

On-Submission Validation

For a cleaner approach, validate only upon form submission. Use $v.formResponses.$anyError to check for any errors.

Add state variables:

data() {
  return {
    uiState: 'submit not clicked',
    errors: false,
    formResponses: {
      // ...
    }
  }
},

Add a submit button and handle submission:

<button>Submit</button>

submitForm() {
  this.errors = this.$v.formResponses.$anyError;
  this.uiState = 'submit clicked';
  if (!this.errors) {
    // Submit form data
    this.uiState = 'form submitted';
  }
},

Display appropriate messages based on the form state:

<p v-if="errors && uiState === 'submit clicked'">The form has errors. Please correct them and resubmit.</p>
<p v-else-if="uiState === 'form submitted'">Form submitted successfully!</p>

Remember to adjust styling as needed for optimal error message display. Consider using a dedicated library for more complex form management. This enhanced approach provides a more user-friendly validation experience. Thanks to Damian Dulisz for reviewing this tutorial.

The above is the detailed content of Form Validation in Under an Hour with Vuelidate. For more information, please follow other related articles on the PHP Chinese website!