Panduan Membuat Form Input dan Validasi dengan Bootstrap 5.3
Oleh Edhik PFull-Stack Developer & Pro Digital AdsPerkiraan waktu baca: 3 menit
Di artikel ini, teman-teman akan belajar cara membuat form input menggunakan Bootstrap 5.3 dan bagaimana melakukan validasi secara otomatis.
Membuat Struktur Form Dasar
Pertama-tama, teman-teman perlu membuat file index.html dan tambahkan kode berikut untuk struktur form dasar:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Form dengan Bootstrap 5.3</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>Form Pendaftaran</h2>
<form>
<div class="mb-3">
<label for="name" class="form-label">Nama</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" required>
</div>
<button type="submit" class="btn btn-primary">Daftar</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Form di atas memiliki tiga input: Nama, Email, dan Password, serta button Daftar. Sekarang, mari tambahkan validasi otomatis.
Validasi Form
Bootstrap 5.3 mendukung validasi form otomatis menggunakan fitur HTML5. Cukup tambahkan atribut required pada input yang wajib diisi. Jika input tidak diisi dengan benar, form akan menampilkan pesan error secara otomatis..
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="name" class="form-label">Nama Lengkap</label>
<input type="text" class="form-control" id="name" required>
<div class="invalid-feedback">
Harap isi nama lengkap Anda.
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">
Masukkan email yang valid.
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" required>
<div class="invalid-feedback">
Kata sandi harus diisi.
</div>
</div>
<button type="submit" class="btn btn-primary">Daftar</button>
</form>
Atribut required memriksa input yang wajib diisi, dan invalid-feedback digunakan untuk menampilkan pesan error jika validasi gagal.
Validasi dengan JavaScript
Selain validasi otomatis, teman-teman juga bisa menambahkan validasi yang lebih interaktif dengan menggunakan JavaScript. Bootstrap menyediakan skrip yang akan menangani validasi secara dinamis.
Tambahkan skrip berikut di bagian bawah file HTML untuk menangani validasi form:
<script>
(function () {
'use strict'
// Ambil semua form berdasarkan class 'needs-validation'
var forms = document.querySelectorAll('.needs-validation')
// Loop untuk menambahkan listener ke setiap form
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
// Cek apakah form valid, jika tidak, hentikan submit
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
// Tambahkan class 'was-validated' untuk menampilkan pesan error
form.classList.add('was-validated')
}, false)
})
})()
</script>
Skrip di atas akan memeriksa jika form hanya akan dikirim jika semua input valid. Jika tidak valid, form akan menampilkan pesan error dan tidak akan dikirim.
Berikut adalah contoh lengkap form dengan validasi otomatis dan JavaScript:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Form Validasi Bootstrap 5.3</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>Form Pendaftaran</h2>
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="name" class="form-label">Nama Lengkap</label>
<input type="text" class="form-control" id="name" required>
<div class="invalid-feedback">
Harap isi nama lengkap Anda.
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">
Masukkan email yang valid.
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Kata Sandi</label>
<input type="password" class="form-control" id="password" required>
<div class="invalid-feedback">
Kata sandi harus diisi.
</div>
</div>
<button type="submit" class="btn btn-primary">Daftar</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function () {
'use strict'
// Ambil semua form berdasarkan class 'needs-validation'
var forms = document.querySelectorAll('.needs-validation')
// Loop untuk menambahkan listener ke setiap form
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
// Cek apakah form valid, jika tidak, hentikan submit
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
// Tambahkan class 'was-validated' untuk menampilkan pesan error
form.classList.add('was-validated')
}, false)
})
})()
</script>
</body>
</html>
Hasilnya akan terlihat seperti ini, jika teman-teman mencoba menekan button Daftar tanpa mengisi form dengan benar, pesan peringatan akan muncul, dan form tidak akan dikirim sampai semua input valid.
Namun jika teman-teman mencoba untuk klik button Daftar tanpa mengisi form, maka muncul warning berikut :
