Tutorial JavaScript: Membuat Validasi Formulir
Dalam tutorial ini, kita akan belajar bagaimana membuat validasi formulir menggunakan JavaScript. Validasi formulir memastikan bahwa pengguna mengisi data dengan benar sebelum data dikirimkan ke server. Ini sangat penting untuk meningkatkan pengalaman pengguna dan mencegah data yang salah atau tidak valid.
1. Membuat Formulir HTML:
Mulailah dengan membuat formulir HTML dengan field yang ingin Anda validasi. Misalnya, formulir kontak dengan nama, alamat email, dan pesan.
<!DOCTYPE html>
<html>
<head>
<title>Formulir Kontak</title>
</head>
<body>
<h1>Formulir Kontak</h1>
<form id="formulir-kontak" onsubmit="return validasiFormulir()">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>
<label for="email">Alamat Email:</label>
<input type="email" id="email" name="email" required>
<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" rows="4" required></textarea>
<button type="submit">Kirim Pesan</button>
</form>
</body>
</html>
2. Membuat Fungsi Validasi:
Selanjutnya, kita akan membuat fungsi validasiFormulir() dalam JavaScript untuk memeriksa apakah semua field telah diisi dengan benar sebelum mengirimkan formulir.
<script>
function validasiFormulir() {
var nama = document.getElementById("nama").value;
var email = document.getElementById("email").value;
var pesan = document.getElementById("pesan").value;
var isValid = true;
if (nama === "") {
alert("Silakan masukkan nama Anda.");
isValid = false;
}
if (email === "") {
alert("Silakan masukkan alamat email Anda.");
isValid = false;
} else if (!isValidEmail(email)) {
alert("Alamat email tidak valid.");
isValid = false;
}
if (pesan === "") {
alert("Silakan masukkan pesan Anda.");
isValid = false;
}
return isValid;
}
function isValidEmail(email) {
var regex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
return regex.test(email);
}
</script>
3. Penjelasan:
Fungsi validasiFormulir() mengambil nilai dari masing-masing field formulir menggunakan document.getElementById() dan memeriksa apakah field tersebut telah diisi atau tidak. Jika ada field yang kosong, maka akan muncul pesan peringatan dan variabel isValid akan diset menjadi false.
Fungsi isValidEmail(email) menggunakan ekspresi reguler (regex) untuk memeriksa apakah alamat email yang dimasukkan pengguna sesuai dengan format email yang benar. Jika alamat email tidak sesuai format, maka fungsi ini akan mengembalikan false.
4. Menggunakan onSubmit Event:
Pada formulir, kita menggunakan atribut onsubmit untuk menentukan bahwa ketika tombol "Kirim Pesan" di klik, fungsi validasiFormulir() akan dieksekusi.
Kesimpulan:
Dalam tutorial ini, Anda telah mempelajari cara membuat validasi formulir sederhana menggunakan JavaScript. Anda telah belajar bagaimana memeriksa apakah semua field telah diisi dengan benar sebelum mengirimkan formulir. Validasi formulir sangat penting untuk memastikan data yang diterima oleh server adalah data yang valid dan benar. Dengan menggunakan JavaScript, Anda dapat meningkatkan pengalaman pengguna dan menjaga integritas data pada situs web Anda. Selamat mencoba!