Bootstrap - Validation: A Guide for Beginners

Halo sana, para pengembang web yang sedang belajar! Hari ini, kita akan melihat dunia validasi Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Jangan khawatir jika Anda baru saja memulai programming – kita akan mulai dari dasar dan naik turun. Pada akhir panduan ini, Anda akan dapat memvalidasi formulir seperti seorang ahli!

Apa Itu Validasi Bootstrap?

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

Gaya Custom

Mari kita mulai dengan gaya custom untuk validasi formulir kita. Bootstrap memungkinkan kita menambahkan keunikan 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 username.
</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 mengatakan ke Bootstrap bahwa field ini harus diisi.

Sekarang, mari kita tambahkan beberapa 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 pendengar peristiwa ke formulir kita, memeriksa validitas saat formulir dikirim. Jika formulir invalid, itu mencegah pengiriman dan menambahkan kelas was-validated, yang memicu gaya custom kita.

Gaya Bawaan Browser

kadang-kadang, Anda mungkin ingin menggunakan gaya validasi bawaan browser. Itu seperti membiarkan browser melakukan pekerjaan berat untuk Anda! Berikut cara Anda dapat 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 menangani validasi menggunakan gaya bawaannya.

Validasi Server-Side

Meskipun validasi client-side bagus 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 invalid";
}
}

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 mempercayai input pengguna!

Element Yang Didukung

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

<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>Kanada</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.

Tooltips

Ingin menambahkan sedikit keunikan ke pesan validasi Anda? Cobalah tooltips! Berikut cara Anda dapat 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 username 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 tooltip 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 merupakan alamat email valid
pattern	Harus cocok dengan pola tertentu

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

Dan itulah, teman-teman! Kita telah melihat dasar-dasar validasi Bootstrap, dari gaya custom hingga tooltips. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini. Selamat coding, dan semoga formulir Anda selalu tervalidasi!

Credits: Image by storyset