[Vuejs]-Validate form using Vuelidate on page load

0👍

You can manually kick off the validation by running $v.$touch() in the mounted hook:

mounted(){ 
  $v.$touch() 
}

0👍

Step 1: HTML template

<template>
  <div id="app">
    <form @submit.prevent="submitRegistration" novalidate>
      <div class="form-group">
        <label for="emailAdd">Email address</label>
        <input
          id="emailAdd"
          ref="emailAdd"
          type="search"
          class="form-control"
          v-model="emailAdd"
          placeholder="Enter your email address"
        />
        <small v-if="$v.emailAdd.$error" class="error">
          <span v-if="!$v.emailAdd.required">Email is required</span>
          <span v-if="emailAdd && !$v.emailAdd.email"
            >The email address entered is invalid</span
          >
        </small>
      </div>
      <div class="form-group">
        <label for="enquiryType">Enquiry type</label>
        <select
          id="enquiryType"
          ref="enquiryType"
          class="form-control"
          v-model="enquiryType"
        >
          <option selected value>Select an enquiry type</option>
          <option value="cs">Customer services</option>
          <option value="eo">Existing order</option>
          <option value="ge">General enquiry</option>
          <option value="sb">Site bug</option>
          <option value="se">Site improvement</option>
        </select>
        <small v-if="!$v.enquiryType.required" class="error"
          >Please select an option</small
        >
      </div>
      <div class="form-group">
        <label for="enqMsg">Message</label>
        <textarea
          id="enqMsg"
          ref="enqMsg"
          class="form-control"
          v-model="enqMsg"
          placeholder="Enter message"
          rows="7"
        ></textarea>
        <small v-if="!$v.enqMsg.required" class="error"
          >Message is required</small
        >
      </div>
      <div class="form-group">
        <input
          type="submit"
          class="btnRegister"
          value="Register"
          :disabled="this.isDisabled"
        />
      </div>
    </form>
  </div>
</template>

Step 2: Scripts will be

<script>
import { required, email } from "vuelidate/lib/validators";

export default {
  name: "App",
  data() {
    return {
      emailAdd: "",
      enquiryType: "",
      enqMsg: "",
    };
  },
  validations: {
    emailAdd: { required, email },
    enquiryType: { required },
    enqMsg: { required },
  },
  created() {
    this.submitted = true;
    return this.$v.$touch();
  },
  computed: {
    isDisabled() {
      return this.$v.$invalid;
    },
  },
  methods: {
    submitRegistration() {
      this.$v.$touch();
      if (this.$v.$invalid) {
        return false; // stop here if form is invalid
      } else {
        alert("Form Valid");
      }
    },
  },
};
</script>

Step 3: Styles will be

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.error {
  color: red;
}
</style>

DEMO

Leave a comment