I. Pendahuluan

Dalam pengembangan web, form digunakan untuk mengumpulkan data dari pengguna. Namun, sebelum data tersebut dikirim ke server, penting untuk memeriksa apakah data yang dimasukkan sudah sesuai. Proses ini disebut validasi. Dengan JavaScript, kita bisa melakukan validasi secara langsung di browser sebelum data dikirim.

II. Mengapa Validasi Penting?

Validasi mencegah:

  • Data kosong yang tidak seharusnya.

  • Format data yang salah (misalnya email atau nomor telepon).

  • Penyalahgunaan atau input yang tidak relevan.

Validasi membantu menjaga kualitas dan keamanan data yang masuk ke sistem.

III. Contoh Form HTML

html
<form id="formku">
<label>Nama:</label>
<input type="text" id="nama" /><br />
<label>Email:</label>
<input type="text" id="email" /><br />
<button type="submit">Kirim</button>
<p id="pesan"></p>
</form>

IV. Validasi dengan JavaScript

javascript
const form = document.getElementById("formku");
const nama = document.getElementById("nama");
const email = document.getElementById("email");
const pesan = document.getElementById("pesan");

form.addEventListener("submit", function(e) {
e.preventDefault(); // Mencegah form dikirim langsung
if (nama.value === "" || email.value === "") {
pesan.innerText = "Semua kolom wajib diisi!";
} else if (!email.value.includes("@")) {
pesan.innerText = "Format email tidak valid!";
} else {
pesan.innerText = "Data berhasil dikirim!";
}
});

V. Tips Tambahan Validasi

  • Gunakan trim() untuk menghapus spasi tidak penting.

  • Tambahkan validasi panjang karakter (misalnya password minimal 8 karakter).

  • Gunakan HTML5 untuk validasi bawaan (type="email", required).

VI. Kesimpulan

Validasi form adalah langkah penting untuk memastikan data yang dikirim pengguna sudah sesuai dan aman. Dengan JavaScript, kita bisa memberikan umpan balik langsung tanpa perlu mengirim data ke server lebih dulu. Ini membuat website lebih ramah pengguna dan efisien.

Penulis: Asdwipa Septiade Giling
NIM: 23156201008
Jurusan: Sistem Komputer, STIMIK Catur Sakti Kendari