Blog
Tutorial Validasi Form Menggunakan HTML Dan Javascript
Jangan pernah menganggap aman apa yang di inputkan oleh user, kurang lebih begitulah pernyataan yang disampaikan jika ingin membuat sebuah aplikasi yang baik. karna kita tidak tau apakah yang di inputkan oleh user sudah benar atau salah. belum lagi kalau apa yang di input bisa membahayakan aplikasi, misalnya yang seharusnya inputan text pada kolom komentar malah disisipi script XSS attack yang membahayakan aplikasi, tentu hal ini bisa sangat fatal akibat nya.
ada banyak jenis validasi yang bisa dimanfaatkan untuk meminimalisir bahaya yang sudah saya sebutkan diatas, tapi secara garis besar kita akan membaginya menjadi 2 bagian yang itu validasi di sisi client dan validasi di sisi server.
pada artikel ini, saya akan fokus membahas validasi di sisi client terlebih dahulu menggunakan fitur HTML 5 dan javascript. dalam artikel ini anggaplah anda disuruh untuk membuat sebuah halaman web formulir pendaftaran siswa baru. kita tidak ingin user yang melakukan pendaftaran bisa melakukan pendaftaran dengan data kosong, sehingga kita perlu melakukan validasi setiap inputan yang diberikan.
Membuat Halaman Form Pendaftaran
sekarang silahkan buat sebuah file html baru dengan nama pendafaran.htm dan ketiklah script berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Form Validation</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form name="formPendaftaran" action="daftar.php" method="post">
<div class="form-group">
<label>Nama</label>
<input type="text" name="nama" placeholder="Nama lengkap" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" placeholder="Email Aktif" class="form-control">
<small id="emailHelp" class="form-text text-muted">Email Akan Digunakan Untuk Mengirimkan Notifikasi.</small>
</div>
<div class="form-group">
<label>Jurusan</label>
<select name="jurusan" class="form-control">
<option value="0">Pilih Jurusan</option>
<option value="1">Jurusan Informatika</option>
<option value="2">Jurusan Teknik Komputer Jaringan</option>
<option value="3">Jurusan Multimedia</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
sekarang silahkan buka file pendaftaran.html menggunakan web browser, makan akan muncul halaman seperti ini :
sampai tahap ini kita hanya mempersiapkan form saja, belum termasuk dengan validasi.
Validasi Form Dengan Menggunakan HTML 5
sebenarnya kita juga bisa memanfaatkan fitur dari HTML untuk melakukan validasi sederhana seperti validasi type inputan, jumlah karakter, textbox tidak boleh kosong dan validasi lainya. sekarang kita akan melakuka modifikasi dengan menambahkan script validasi dengan HTML.
silahkan modifikasi textbox untuk nama menjadi seperti dibawah ini
<input type="text" name="nama" placeholder="Nama lengkap" class="form-control" required maxlength="40" minlength="3">
Validasi Form Dengan Javacript
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Form Validation</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form name="formPendaftaran" action="daftar.php" method="post" onsubmit="return validateForm()">
<div class="form-group">
<label>Nama</label>
<input type="text" name="nama" placeholder="Nama lengkap" class="form-control" required maxlength="40" minlength="3">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" placeholder="Email Aktif" class="form-control">
<small id="emailHelp" class="form-text text-muted">Email Akan Digunakan Untuk Mengirimkan Notifikasi.</small>
</div>
<div class="form-group">
<label>Jurusan</label>
<select name="jurusan" class="form-control">
<option value="0">Pilih Jurusan</option>
<option value="1">Jurusan Informatika</option>
<option value="2">Jurusan Teknik Komputer Jaringan</option>
<option value="3">Jurusan Multimedia</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script>
function validateForm() {
if (document.forms["formPendaftaran"]["nama"].value == "") {
alert("Nama Tidak Boleh Kosong");
document.forms["formPendaftaran"]["nama"].focus();
return false;
}
if (document.forms["formPendaftaran"]["email"].value == "") {
alert("Email Tidak Boleh Kosong");
document.forms["formPendaftaran"]["email"].focus();
return false;
}
if (document.forms["formPendaftaran"]["jurusan"].selectedIndex < 1) {
alert("Pilih Jurusan.");
document.forms["formPendaftaran"]["jurusan"].focus();
return false;
}
}
</script>
</body>
</html>
lalu silahkan save untuk menyimpan perubahan, sekarang coba kosongkan textbox email dan klik button maka akan muncul alert box seperti gambar dibawah ini yang memberi info bahwa textbox tersebut tidak boleh kosong dan menunjutkan posisi textbox yang dimaksud dengan method .focus dari perintah javascript.
Video Tutorial Validasi Form Dengan HTML Dan Javascript
Baca Artikel Terkain Menarik Lain:
