Tentu, ini artikel yang Anda minta:
Validasi formulir (form validation) adalah proses penting untuk memastikan data yang dimasukkan pengguna sudah benar sebelum dikirim ke server. Tujuannya adalah untuk meningkatkan kualitas data, memberikan umpan balik instan kepada pengguna, dan mengurangi beban di sisi server.
Meskipun banyak plugin validasi JQuery yang tersedia, membuat validasi dari nol adalah cara yang bagus untuk mengerti prinsip dasarnya dan menyesuaikannya sesuai kebutuhan spesifik Anda. Dalam tutorial JQuery ke-15 ini, kita akan membuat validasi formulir sederhana menggunakan JQuery murni.
1. Persiapan Struktur HTML dan CSS
Langkah pertama adalah membuat formulir HTML dan gaya dasar untuk pesan error.
Struktur HTML
Buat file index.html dengan formulir sederhana. Kita akan menyertakan elemen <span> dengan kelas .error di bawah setiap input untuk menampilkan pesan kesalahan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validasi Sederhana</title>
</head>
<body>
<h2>Formulir Pendaftaran</h2>
<form id="myForm">
<div>
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama" required>
<span class="error" id="namaError"></span>
</div>
<br>
<div>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required>
<span class="error" id="emailError"></span>
</div>
<br>
<div>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required>
<span class="error" id="passwordError"></span>
</div>
<br>
<button type="submit">Daftar</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// Kode JQuery akan diletakkan di sini
</script>
</body>
</html>
Gaya CSS
Tambahkan CSS berikut di tag <style> untuk membuat pesan error berwarna merah.
.error {
color: red;
font-size: 0.8em;
display: block; /* Memastikan setiap pesan berada di baris baru */
margin-top: 5px;
}
input:invalid {
border-color: red;
}
2. Logika Validasi dengan JQuery
Sekarang, kita akan menggunakan JQuery untuk menangani validasi. Kita akan memeriksa setiap input saat formulir disubmit.
Kode JQuery
Tambahkan kode JQuery berikut di dalam tag <script>.
$(document).ready(function() {
// Menangani pengiriman formulir saat event 'submit'
$('#myForm').submit(function(e) {
let formIsValid = true; // Flag untuk melacak status validasi
// Membersihkan pesan error sebelumnya
$('.error').text('');
// 1. Validasi Nama
let nama = $('#nama').val().trim();
if (nama === '') {
$('#namaError').text('Nama tidak boleh kosong.');
formIsValid = false;
}
// 2. Validasi Email
let email = $('#email').val().trim();
let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (email === '') {
$('#emailError').text('Email tidak boleh kosong.');
formIsValid = false;
} else if (!emailPattern.test(email)) {
$('#emailError').text('Format email tidak valid.');
formIsValid = false;
}
// 3. Validasi Password
let password = $('#password').val();
if (password.length < 8) {
$('#passwordError').text('Password minimal 8 karakter.');
formIsValid = false;
}
// Mencegah form dari submit jika ada error
if (!formIsValid) {
e.preventDefault();
} else {
// Jika validasi berhasil, Anda bisa mengirim data ke server
alert('Formulir berhasil divalidasi dan siap dikirim!');
// e.preventDefault(); // Hapus baris ini untuk memungkinkan form disubmit
}
});
});
Penjelasan Kode
$(document).ready(function() { ... });: Ini adalah praktik standar untuk memastikan kode berjalan setelah dokumen HTML siap.e.preventDefault(): Baris ini sangat penting. Ini akan mencegah formulir melakukan submit dan memuat ulang halaman secara default, sehingga Anda bisa mengontrol proses validasinya.formIsValid: Kita menggunakan variabel boolean ini sebagai “bendera” untuk melacak apakah ada kesalahan validasi.$('.error').text(''): Kita membersihkan semua pesan error dari pengiriman sebelumnya untuk menghindari tumpukan pesan.- Validasi per-input:
- Nama: Kita memeriksa apakah input
namakosong setelah spasi dihilangkan (.trim()). - Email: Kita memeriksa kekosongan dan kemudian menggunakan ekspresi reguler (regex) (
emailPattern) untuk memastikan format email valid. Regex ini adalah pola teks yang kuat untuk mencocokkan string. - Password: Kita hanya memeriksa panjangnya. Anda bisa menambahkan validasi yang lebih kompleks (misalnya, harus mengandung angka dan huruf besar).
- Nama: Kita memeriksa apakah input
- Pencegahan Submit:
if (!formIsValid) { e.preventDefault(); }memastikan bahwa jika ada setidaknya satu kesalahan, formulir tidak akan disubmit.
Kesimpulan
Membuat form validasi dengan JQuery tanpa plugin memberikan Anda kontrol penuh, pemahaman mendalam tentang cara kerja validasi, dan fleksibilitas untuk menyesuaikan setiap detailnya. Meskipun kodenya lebih panjang, pendekatan ini adalah cara yang luar biasa untuk melatih keterampilan JavaScript dan JQuery Anda.
