Form Validation Basics

Form validation allows you to check user input before processing it. This helps ensure that the data is correct and complete.

In Vue, you can validate form input using reactive data and simple conditions.

<script setup>
import { ref } from "vue";

const email = ref("");
const error = ref("");

function handleSubmit() {
  if (email.value === "") {
    error.value = "Email is required";
  } else {
    error.value = "";
    console.log("Submitted:", email.value);
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="email" placeholder="Enter your email" />
    <button type="submit">Submit</button>
  </form>

  <p v-if="error">{{ error }}</p>
</template>

If the input is empty, an error message is shown. If the input is valid, the form is processed.

You can also validate multiple fields by checking each value and displaying messages when needed.

Form validation helps you control input quality and improve user experience.