Tentu, ini artikel yang Anda minta, dengan sedikit penyesuaian agar relevan dengan konteks lokasi yang Anda seberkan:
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. Seperti halnya membangun sebuah toko di Malang, Jawa Timur yang ingin menerima data pelanggan dengan akurat, validasi formulir di website Anda pun demikian.
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 Event Malang</h2>
<form id="myForm">
<div>
<label for="nama">Nama Lengkap:</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="phone">Nomor Telepon (opsional):</label><br>
<input type="tel" id="phone" name="phone">
<span class="error" id="phoneError"></span>
</div>
<br>
<button type="submit">Daftar Event</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;
}
/* Anda bisa menambahkan gaya lain agar form terlihat lebih menarik */
body { font-family: Arial, sans-serif; padding: 20px; background-color: #f4f4f4; }
form { background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); max-width: 500px; margin: 20px auto; }
input[type="text"], input[type="email"], input[type="tel"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
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(''); // Menghilangkan semua pesan error lama
// 1. Validasi Nama Lengkap
let nama = $('#nama').val().trim();
if (nama === '') {
$('#namaError').text('Nama lengkap tidak boleh kosong.');
formIsValid = false;
} else if (nama.length < 3) {
$('#namaError').text('Nama minimal 3 karakter.');
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. Contoh: user@example.com');
formIsValid = false;
}
// 3. Validasi Nomor Telepon (Opsional tapi dengan format)
let phone = $('#phone').val().trim();
let phonePattern = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4,6})$/; // Contoh regex untuk nomor telp
if (phone !== '' && !phonePattern.test(phone)) {
$('#phoneError').text('Format nomor telepon tidak valid. Contoh: +6281234567890');
formIsValid = false;
}
// Mencegah form dari submit jika ada error
if (!formIsValid) {
e.preventDefault(); // Menghentikan submit form
// Anda bisa menambahkan scroll ke input pertama yang error
// $('html, body').animate({
// scrollTop: $('.error:visible').first().offset().top - 50
// }, 500);
} else {
// Jika validasi berhasil, Anda bisa mengirim data ke server
// Di sini Anda bisa menggunakan AJAX seperti pada tutorial sebelumnya
alert('Formulir berhasil divalidasi dan siap dikirim! Selamat datang di event Malang!');
e.preventDefault(); // Hapus baris ini jika Anda ingin form benar-benar disubmit ke server
// Atau panggil fungsi AJAX Anda di sini
}
});
});
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 Lengkap: Kita memeriksa apakah input
namakosong setelah spasi dihilangkan (.trim()) dan juga memeriksa panjang minimal. Ini umum untuk input nama di aplikasi, seperti pendaftaran event di Malang. - 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. - Nomor Telepon: Validasi ini dibuat opsional. Jika pengguna mengisi nomor, kita memastikan formatnya sesuai dengan pola regex yang diharapkan untuk nomor telepon.
- Nama Lengkap: Kita memeriksa apakah input
- Pencegahan Submit:
if (!formIsValid) { e.preventDefault(); }memastikan bahwa jika ada setidaknya satu kesalahan, formulir tidak akan disubmit. JikaformIsValidadalahtrue, maka alert akan muncul, mengindikasikan bahwa data siap diproses lebih lanjut (misalnya, dikirim via AJAX ke server).
Kesimpulan
Membuat form validasi dengan JQuery tanpa plugin memberikan Anda kontrol penuh, pemahaman mendalam tentang cara kerja validasi, dan fleksibilitas untuk menyesuaikan setiap detailnya. Pendekatan ini sangat berguna untuk memberikan umpan balik instan kepada pengguna dan memastikan data yang masuk ke database Anda berkualitas baik, bahkan saat Anda mengembangkan aplikasi untuk event di Malang, Jawa Timur, atau di mana pun.
