Close Menu
Tutorial

Cara Menggunakan Data Validation untuk Membuat Form Input

By 5 Mins Read0 Views
Cara Menggunakan Data Validation untuk Membuat Form Input

Cara Menggunakan Data Validation untuk Membuat Form Input – Pernah gak sih kamu nemu form di suatu website, terus asal isi aja, tapi langsung muncul peringatan kayak “email tidak valid” atau “password terlalu pendek”?

Nah, itu dia yang namanya data validation alias validasi data. Di dunia web development, fitur ini penting banget buat ngejaga supaya data yang masuk ke sistem gak ngawur.

Validasi bukan cuma soal bikin form lebih cakep, tapi juga ngelindungi data, nyelametin server, dan bikin pengalaman pengguna makin nyaman.

Jadi, kalau kamu lagi ngembangin form, yuk pelajari bareng cara pakai data validation yang benar biar hasilnya gak bikin kesel user.

Apa Itu Data Validation?

Data validation adalah proses untuk ngecek apakah input dari pengguna udah sesuai dengan aturan atau belum. Misalnya, kolom email cuma boleh diisi alamat email yang valid, atau kolom umur cuma boleh diisi angka. Kalau input gak sesuai, sistem bakal nolak dan biasanya kasih pesan error.

Tujuannya? Jelas banget: biar data yang dikirim ke server gak rusak atau gak masuk akal.

Kenapa Form Input Butuh Validasi?

  • Lindungi sistem dari input sembarangan
    Bayangin kalo kolom umur bisa diisi huruf. Waduh, server bisa bingung bacanya!

  • Kurangi spam dan bot
    Form yang gak divalidasi rawan diserbu spammer.

  • Tingkatkan pengalaman pengguna
    Dengan validasi real-time, user langsung tahu kalau inputnya salah tanpa harus klik submit dulu.

  • Mencegah error di backend
    Backend yang dapet data ngawur = error everywhere.

Jenis-Jenis Validasi yang Umum Digunakan

1. Validasi Manual vs Validasi Otomatis

  • Manual: Kamu nulis script sendiri buat ngecek tiap field.

  • Otomatis: Gunakan fitur bawaan seperti HTML5, atau library kayak Formik, Yup, dll.

2. Validasi Client-Side vs Server-Side

  • Client-side: Dilakukan di browser pengguna pakai HTML/JS.

  • Server-side: Validasi ulang di server. Penting buat keamanan.

3. Validasi dengan Regex (Regular Expression)

Regex tuh semacam formula buat nyocokin pola data. Cocok banget buat validasi email, nomor HP, atau format tertentu.

Tools dan Bahasa yang Sering Dipakai

1. HTML5

Pakai atribut kayak required, pattern, type buat validasi bawaan.

2. JavaScript

Custom validation pakai script, cocok buat validasi dinamis.

3. PHP

Kalau datanya udah dikirim, PHP bisa validasi ulang di backend.

4. Excel (Bonus Offline Tool)

Form internal pakai Excel juga bisa divalidasi lewat fitur Data Validation.

Langkah-Langkah Dasar Membuat Form Input

1. Tentukan Input yang Perlu Divalidasi

Contoh: email, password, nama lengkap, umur, nomor HP, dll.

2. Desain Struktur Form yang User Friendly

Gunakan placeholder, label yang jelas, dan jangan bikin user bingung.

3. Berikan Feedback Real-Time

Jangan bikin user klik submit dulu baru tau inputnya salah. Tampilkan pesan langsung saat mereka ngetik.

Cara Menggunakan Data Validation di HTML

HTML5 udah nyediain banyak atribut validasi, contohnya:

<form>
<label>Email:</label>
<input type="email" name="email" required />

<label>Umur:</label>
<input type="number" name="umur" min="10" max="100" required />

<label>Password:</label>
<input type="password" name="password" pattern=".{6,}" title="Minimal 6 karakter" required />

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

Keterangan:

  • required: Wajib diisi

  • type="email": Harus format email

  • pattern: Pakai regex buat custom aturan

Cara Menambahkan Validasi di JavaScript

HTML emang keren, tapi kadang kita butuh validasi yang lebih kompleks. Nah, di sinilah JavaScript masuk.

Contoh Sederhana:

<script>
function validateForm() {
let email = document.forms["myForm"]["email"].value;
if (!email.includes("@")) {
alert("Email gak valid!");
return false;
}
}
</script>

<form name="myForm" onsubmit="return validateForm()">
<input type="text" name="email" />
<button type="submit">Submit</button>
</form>

Event Listener (versi modern):

document.querySelector("form").addEventListener("submit", function(e) {
const email = document.querySelector("input[name='email']").value;
if (!email.includes("@")) {
e.preventDefault();
alert("Email harus ada tanda @ nya dong!");
}
});

Validasi di Server-Side dengan PHP

Jangan cuma andalin validasi di frontend, karena user bisa akalin pakai developer tools.

Contoh Validasi PHP:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = filter_input(INPUT_POST, "email", FILTER_VALIDATE_EMAIL);
if (!$email) {
echo "Email gak valid!";
} else {
echo "Email berhasil diterima: $email";
}
}
?>

Validasi di Excel (Untuk Form Internal/Offline)

Excel juga punya fitur validasi data loh! Cocok buat form offline.

Langkah-Langkah:

  1. Pilih sel tempat input

  2. Klik menu Data > Data Validation

  3. Pilih tipe data: number, list, date, dsb.

  4. Masukkan kriteria (misalnya: 18–65 untuk umur)

  5. Tambahkan alert atau pesan error

Tips UX: Biar Gak Bikin User Kesel

  • Pakai placeholder yang jelas
    Contoh: “Masukkan email aktif kamu” daripada cuma “Email”

  • Tampilkan error dengan warna merah & icon
    Biar langsung kelihatan salahnya di mana

  • Jangan pakai aturan yang aneh-aneh
    Contoh: password harus ada 3 simbol, 2 huruf besar, 1 emoji? Overkill bro.

Contoh Kasus Nyata

1. Form Registrasi Akun

Validasi: username unik, email valid, password min 8 karakter

2. Form Pemesanan Tiket

Validasi: nama lengkap, nomor kursi, tanggal valid

3. Form Survey Data Pengguna

Validasi: semua field opsional kecuali email

Kesalahan Umum dalam Validasi Form

  • Gak validasi di server
    Padahal user bisa manipulasi form HTML di browser

  • Pesan error yang gak jelas
    Contoh: “Error 1003” — ini maksudnya apaan?

  • Field valid tapi ditolak karena bug logic
    Misalnya email pakai tanda titik di belakang, padahal valid

Gunakan Library Validasi Biar Gampang

Kalau kamu pakai framework kayak React, Vue, atau Node.js, bisa banget pakai library validasi:

  • Yup.js: Dipakai bareng Formik, cocok buat React

  • Validator.js: Library JS ringan buat validasi umum

  • Formik: Library form handling lengkap di React

  • Jquery Validation Plugin: Kalau masih pakai jQuery, ini juara

Best Practices Validasi Form

  • Validasi di dua sisi: client-side & server-side

  • Gunakan progressive enhancement: validasi tetap jalan walau JavaScript dimatikan

  • Uji coba di berbagai perangkat & browser: biar gak ada bug UI/UX

 

Kesimpulan

Validasi itu bukan cuma urusan teknis, tapi juga soal empati sama pengguna. Jangan sampai user kamu bingung, kesel, atau bahkan frustrasi gara-gara form yang “batu”.

Dengan data validation, kamu bisa bikin form yang rapi, aman, dan bikin user nyaman. Mulai dari HTML, JavaScript, sampai PHP dan Excel pun bisa kamu andalkan buat jaga kualitas data.

Jadi, yuk mulai praktikin sekarang! Buka code editor kamu, dan coba bikin form dengan validasi yang proper. Karena form tanpa validasi tuh ibarat dompet bolong kelihatan aman, tapi isinya bisa bocor ke mana-mana.

Share.

Keingintahuan adalah sumbu dalam lilin pembelajaran.

Anda mungkin menyukai: