NUXT PRACTICAL 6: ERROR HANDLING AND VALIDATION IN NUXT FORMS
=================================================================

================================================

AIM:
Create a simple registration form with required-field checks,
email validation, password validation and error messages.

PROJECT STRUCTURE:
nuxt-form-validation/
|
|-- app.vue
|-- pages/
    |-- index.vue

STEP 1: Create project
----------------------
npx nuxi@latest init nuxt-form-validation
cd nuxt-form-validation
npm install

STEP 2: app.vue
---------------
<template>
  <NuxtPage />
</template>

STEP 3: pages/index.vue
-----------------------
<script setup>
const name = ref('')
const email = ref('')
const password = ref('')

const errors = ref({})
const successMessage = ref('')

function validateForm() {
  errors.value = {}
  successMessage.value = ''

  if (!name.value.trim()) {
    errors.value.name = 'Name is required'
  }

  const emailPattern = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/

  if (!email.value.trim()) {
    errors.value.email = 'Email is required'
  } else if (!emailPattern.test(email.value)) {
    errors.value.email = 'Enter a valid email address'
  }

  if (!password.value) {
    errors.value.password = 'Password is required'
  } else if (password.value.length < 6) {
    errors.value.password = 'Password must have at least 6 characters'
  }

  return Object.keys(errors.value).length === 0
}

function submitForm() {
  if (!validateForm()) {
    return
  }

  successMessage.value = 'Registration successful!'

  name.value = ''
  email.value = ''
  password.value = ''
  errors.value = {}
}
</script>

<template>
  <div>
    <h1>Registration Form</h1>

    <form @submit.prevent="submitForm">
      <div>
        <label>Name</label>
        <input v-model="name" type="text" placeholder="Enter name" />
        <p v-if="errors.name" class="error">{{ errors.name }}</p>
      </div>

      <div>
        <label>Email</label>
        <input v-model="email" type="email" placeholder="Enter email" />
        <p v-if="errors.email" class="error">{{ errors.email }}</p>
      </div>

      <div>
        <label>Password</label>
        <input v-model="password" type="password" placeholder="Enter password" />
        <p v-if="errors.password" class="error">{{ errors.password }}</p>
      </div>

      <button type="submit">Register</button>
    </form>

    <p v-if="successMessage" class="success">
      {{ successMessage }}
    </p>
  </div>
</template>

<style scoped>
div {
  margin-bottom: 12px;
}

input {
  display: block;
  margin-top: 5px;
  padding: 8px;
}

.error {
  color: red;
}

.success {
  color: green;
}
</style>

RUN:
npm run dev

Open:
http://localhost:3000

CONCEPT:
- v-model connects form inputs to Vue state.
- validateForm() checks the entered values.
- errors stores validation messages.
- v-if displays errors only when they exist.
- @submit.prevent stops the browser's normal form submission.
- The success message appears only when validation passes.

IMPORTANT:
This is basic client-side validation for a classroom practical.
Real applications must also validate data on the server.


================================================
