Membuat Formulir Interaktif di Vue.js dengan Validasi Sederhana

Formulir adalah bagian integral dari hampir semua aplikasi web, mulai dari login, pendaftaran, input data, hingga feedback pengguna. Namun, membuat formulir yang interaktif dan sekaligus mudah digunakan oleh pengguna bisa menjadi tantangan, apalagi jika harus memikirkan validasi input, penanganan error, dan feedback visual.

Vue.js hadir sebagai solusi yang sangat efektif untuk membangun formulir yang reaktif, mudah dikelola, dan mudah divalidasi. Dengan bantuan directive seperti v-model, v-if, dan computed properties, kita bisa dengan cepat membangun formulir yang responsif terhadap input pengguna dan mampu memberikan umpan balik instan jika terjadi kesalahan input.

Dalam artikel ini, kita akan belajar bagaimana membuat formulir interaktif di Vue 3 dengan pendekatan komponen single-file (.vue) menggunakan script setup. Kita akan mengimplementasikan validasi sederhana — seperti memastikan input tidak kosong dan memeriksa format email — untuk menjaga integritas data pengguna.

Struktur Dasar Formulir di Vue

Sebelum kita menambahkan validasi, mari kita mulai dengan struktur dasar formulir. Di Vue, pengisian data oleh pengguna umumnya diikat dengan directive v-model, sehingga setiap kali pengguna mengetik atau memilih sesuatu, data model di JavaScript otomatis diperbarui. Ini memungkinkan kita untuk merespons input pengguna secara langsung, misalnya dengan memberikan peringatan jika ada input yang salah atau belum diisi.

Contoh Awal: Formulir Pendaftaran Dasar

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label>Nama:</label>
      <input type="text" v-model="form.nama" />
    </div>

    <div>
      <label>Email:</label>
      <input type="email" v-model="form.email" />
    </div>

    <div>
      <label>Password:</label>
      <input type="password" v-model="form.password" />
    </div>

    <button type="submit">Kirim</button>
  </form>
</template>

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

const form = ref({
  nama: '',
  email: '',
  password: ''
});

function submitForm() {
  console.log('Data terkirim:', form.value);
}
</script>

Penjelasan:

• v-model mengikat nilai input ke objek form secara dua arah.
• Event @submit.prevent mencegah reload halaman dan memanggil submitForm() saat form dikirim.

Namun, saat ini formulir kita belum melakukan validasi apapun. Mari kita tambahkan validasi sederhana.

---

Menambahkan Validasi Sederhana

Validasi formulir adalah proses memeriksa apakah data yang dimasukkan oleh pengguna sudah sesuai dengan harapan, seperti:

• Nama tidak boleh kosong.
• Email harus dalam format yang valid.
• Password minimal 6 karakter.

Langkah 1: Menyimpan Pesan Error

Kita akan membuat objek errors untuk menyimpan pesan-pesan kesalahan input. Objek ini akan digunakan untuk memberikan feedback visual kepada pengguna.

const errors = ref({
  nama: '',
  email: '',
  password: ''
});

Langkah 2: Fungsi Validasi

Kita akan membuat fungsi validateForm() yang memeriksa setiap field dan mengisi objek errors jika ada input yang tidak valid.

function validateForm() {
  let valid = true;
  errors.value = {
    nama: '',
    email: '',
    password: ''
  };

  if (!form.value.nama) {
    errors.value.nama = 'Nama wajib diisi.';
    valid = false;
  }

  if (!form.value.email) {
    errors.value.email = 'Email wajib diisi.';
    valid = false;
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.value.email)) {
    errors.value.email = 'Format email tidak valid.';
    valid = false;
  }

  if (!form.value.password) {
    errors.value.password = 'Password wajib diisi.';
    valid = false;
  } else if (form.value.password.length < 6) {
    errors.value.password = 'Password minimal 6 karakter.';
    valid = false;
  }

  return valid;
}

Penjelasan:

• Fungsi ini melakukan validasi satu per satu pada tiap field.
• Jika ada kesalahan, pesan kesalahan dimasukkan ke dalam errors, dan fungsi mengembalikan false.

---

Menghubungkan Validasi ke Formulir

Kita perlu memanggil validateForm() sebelum mengirim data. Jika validasi berhasil, baru kita lanjutkan proses submit.

Final Template dengan Validasi

<template>
  <form @submit.prevent="submitForm" novalidate>
    <div>
      <label>Nama:</label>
      <input v-model="form.nama" type="text" />
      <p v-if="errors.nama" style="color: red;">{{ errors.nama }}</p>
    </div>

    <div>
      <label>Email:</label>
      <input v-model="form.email" type="email" />
      <p v-if="errors.email" style="color: red;">{{ errors.email }}</p>
    </div>

    <div>
      <label>Password:</label>
      <input v-model="form.password" type="password" />
      <p v-if="errors.password" style="color: red;">{{ errors.password }}</p>
    </div>

    <button type="submit">Kirim</button>
  </form>
</template>

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

const form = ref({
  nama: '',
  email: '',
  password: ''
});

const errors = ref({
  nama: '',
  email: '',
  password: ''
});

function validateForm() {
  let valid = true;
  errors.value = {
    nama: '',
    email: '',
    password: ''
  };

  if (!form.value.nama) {
    errors.value.nama = 'Nama wajib diisi.';
    valid = false;
  }

  if (!form.value.email) {
    errors.value.email = 'Email wajib diisi.';
    valid = false;
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.value.email)) {
    errors.value.email = 'Format email tidak valid.';
    valid = false;
  }

  if (!form.value.password) {
    errors.value.password = 'Password wajib diisi.';
    valid = false;
  } else if (form.value.password.length < 6) {
    errors.value.password = 'Password minimal 6 karakter.';
    valid = false;
  }

  return valid;
}

function submitForm() {
  if (validateForm()) {
    alert('Data berhasil dikirim:\n' + JSON.stringify(form.value, null, 2));
  }
}
</script>

---

Peningkatan: Menambahkan Class Error untuk Visual yang Lebih Baik

Selain menampilkan pesan kesalahan, kamu juga bisa menambahkan class CSS agar input yang salah terlihat lebih jelas.

Tambahkan Class pada Input

<input
  v-model="form.email"
  type="email"
  :class="{ 'input-error': errors.email }"
/>

Tambahkan CSS

<style scoped>
.input-error {
  border: 1px solid red;
}
</style>

---

Dengan Vue.js, membuat formulir yang interaktif dan validasi yang responsif bisa dilakukan dengan sangat mudah. Kita memanfaatkan:

• v-model untuk binding dua arah antara data dan input.
• v-if untuk menampilkan pesan error hanya saat terjadi kesalahan.
• Struktur data dan fungsi validasi sederhana untuk menjaga kualitas input pengguna.

Walaupun kita baru menerapkan validasi sederhana, pola ini sudah cukup untuk sebagian besar kebutuhan dasar aplikasi. Untuk validasi yang lebih kompleks dan terstruktur, kamu bisa menggunakan library seperti VeeValidate atau Yup.