Bootstrap - Validasi: Panduan Komprehensif untuk Pemula

Halo teman-teman pemula pengembang web! Hari ini, kita akan mendalaminya dunia validasi Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda dalam perjalanan ini. Jangan khawatir jika Anda baru dalam pemrograman – kita akan mulai dari dasar dan naik tingkat perlahan-lahan. Pada akhir panduan ini, Anda akan dapat memvalidasi formulir seperti seorang ahli!

Apa Itu Validasi Bootstrap?

Sebelum kita masuk ke detailnya, mari kita memahami apa itu validasi Bootstrap. Bayangkan Anda mengisi formulir secara online, dan secara tak sengaja Anda meninggalkan field yang diperlukan kosong. Tiba-tiba, formulir menandai field itu dengan merah, memberitahu Anda untuk mengisi field itu. Itu adalah validasi formulir dalam aksi! Bootstrap, alat front-end yang dapat dipercaya, menyediakan fitur validasi bawaan untuk membuat proses ini mulus dan penggunaannya mudah.

Gaya Khusus

Mari kita mulai dengan gaya khusus untuk validasi formulir kita. Bootstrap memungkinkan kita untuk menambahkan keunikan kita sendiri ke dalam proses validasi. Ini adalah contoh sederhana:

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-feedback">
Pilihlah nama pengguna.
</div>
</div>
<button class="btn btn-primary" type="submit">Kirim formulir</button>
</form>

Dalam contoh ini, kita menambahkan kelas needs-validation ke formulir kita dan mengatur novalidate untuk mencegah validasi bawaan browser. Atribut required pada field input memberitahu Bootstrap bahwa field ini harus diisi.

Sekarang, mari kita tambahkan sedikit JavaScript untuk membuatnya bekerja:

(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();

Kode JavaScript ini menambahkan penggunaan event listener ke formulir kita, memeriksa validitas ketika formulir dikirim. Jika formulir itu invalid, itu mencegah pengiriman dan menambahkan kelas was-validated, yang memicu gaya khusus kita.

Gaya Default Browser

kadang-kadang, Anda mungkin ingin menggunakan gaya validasi default browser. Itu seperti membiarkan browser melakukan pekerjaan berat bagi Anda! Berikut cara Anda bisa melakukannya:

<form>
<div class="form-group">
<label for="email">Alamat Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<button class="btn btn-primary" type="submit">Kirim</button>
</form>

Dalam kasus ini, kita menghapus kelas needs-validation dan atribut novalidate. Browser akan sekarang mengelola validasi menggunakan gaya defaultnya.

Validasi Server-Side

Meskipun validasi client-side sangat baik untuk pengalaman pengguna, kita selalu harus mengimplementasikan validasi server-side untuk keamanan. Ini adalah contoh sederhana PHP:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Format email tidak valid";
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

Kode PHP ini memeriksa apakah email yang dikirim valid. Selalu ingat: jangan pernah mengandalkan input pengguna!

Elemen Yang Didukung

Validasi Bootstrap mendukung berbagai elemen formulir. Mari kita lihat beberapa di antaranya:

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="country">Negara</label>
<select class="form-control" id="country" required>
<option value="">Pilih...</option>
<option>USA</option>
<option>UK</option>
<option>Canada</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">
Setuju dengan syarat dan ketentuan
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Kirim formulir</button>
</form>

Formulir ini termasuk input teks, input password, dropdown pilihan, dan checkbox - semua didukung oleh validasi Bootstrap.

Tips

Ingin menambahkan sedikit keunikan ke pesan validasi Anda? Cobalah tips! Berikut cara Anda bisa melakukannya:

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-tooltip">
Pilihlah nama pengguna yang unik.
</div>
</div>
<button class="btn btn-primary" type="submit">Kirim formulir</button>
</form>

Kita telah mengganti invalid-feedback dengan invalid-tooltip. Sekarang, instead of text below the input, Anda akan melihat tips yang menarik!

Metode Validasi

Berikut adalah tabel metode validasi umum yang Anda dapat gunakan:

Metode	Deskripsi
required	Field tidak boleh kosong
minlength	Panjang karakter minimum
maxlength	Panjang karakter maksimum
min	Nilai minimum untuk input numerik
max	Nilai maksimum untuk input numerik
type="email"	Harus adalah alamat email yang valid
pattern	Harus cocok dengan pola tertentu

Ingat, Anda dapat mengkombinasikan metode ini untuk aturan validasi yang lebih kompleks!

Dan itu dia, teman-teman! Kita telah melihat dasar-dasar validasi Bootstrap, dari gaya khusus hingga tips. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep ini. Selamat pemrograman, dan semoga formulir Anda selalu tervalidasi!

Credits: Image by storyset