Atribut Validasi Formulir
Terapkan atribut required, minlength, maxlength, pattern, min, max, dan step, lalu atur gaya status validasi dengan pseudo-kelas :valid dan :invalid.
Atribut Validasi Formulir adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Validasi Bawaan Peramban
HTML5 menyediakan validasi formulir bawaan melalui atribut. Saat formulir dikirim, peramban memvalidasi setiap bidang. Jika validasi gagal, peramban menampilkan keterangan kesalahan bawaan dan mencegah pengiriman — tidak diperlukan JS untuk kasus dasar.
required
Menambahkan required ke masukan, select, atau textarea menjadikannya wajib diisi. Peramban menampilkan kesalahan jika bidang tersebut kosong saat formulir dikirim.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength dan maxlength
minlength menetapkan jumlah minimum karakter. maxlength mencegah masukan melebihi batas maksimum. Gabungkan keduanya untuk menerapkan kompleksitas kata sandi atau membatasi panjang komentar.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min, max, dan step untuk Masukan Numerik
min dan max menetapkan rentang yang valid untuk masukan angka dan tanggal. step menetapkan kenaikan — berguna untuk rentang (5%, ketelitian desimal, khusus tanggal).
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — Validasi Ekspresi Reguler
pattern menerima ekspresi reguler JavaScript. Masukan harus cocok dengan pola tersebut agar formulir dapat dikirim. Sertakan title untuk menjelaskan format yang diharapkan dalam keterangan kesalahan peramban.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — Menonaktifkan Validasi Bawaan
Tambahkan novalidate ke elemen <form> untuk menonaktifkan semua validasi peramban bawaan. Lakukan ini saat Anda menerapkan validasi JavaScript khusus agar pengguna mendapatkan pengalaman yang konsisten.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>Memeriksa Validitas dalam JavaScript
Constraint Validation API memungkinkan Anda memeriksa validitas secara terprogram: input.validity (objek ValidityState), input.checkValidity() (mengembalikan boolean), input.setCustomValidity(message) (menetapkan kesalahan kustom).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
Panggil setCustomValidity(message) dengan string yang tidak kosong untuk menandai masukan sebagai tidak valid dengan pesan kustom. Panggil dengan string kosong untuk menghapus kesalahan. Ini berguna untuk bidang yang divalidasi server, seperti keunikan username.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}Pseudokelas :valid dan :invalid
Atur gaya masukan yang valid dan tidak valid dengan pseudokelas CSS. Berhati-hatilah: masukan akan menjadi :invalid sebelum pengguna berinteraksi dengannya. Gunakan :user-invalid (peramban modern) atau JavaScript untuk menambahkan kelas 'touched' terlebih dahulu.
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }Pesan Kesalahan Kustom dengan reportValidity
form.reportValidity() memicu antarmuka validasi bawaan peramban pada semua bidang. Gunakan setelah menetapkan pesan validitas kustom agar pesan tersebut ditampilkan kepada pengguna tanpa menunggu peristiwa pengiriman.
Pola Tampilan Kesalahan yang Aksesibel
Tampilkan kesalahan sebaris menggunakan: 1) aria-invalid="true" pada masukan, 2) paragraf kesalahan yang terlihat dan ditautkan dengan aria-describedby, 3) pindahkan fokus ke bidang tidak valid pertama. Cara ini melayani semua pengguna, termasuk pengguna pembaca layar.
Pemeriksaan Cepat
Atribut mana yang membatasi masukan teks hingga maksimal 280 karakter?
Rangkuman: Atribut Validasi Formulir
required, minlength/maxlength, min/max/step, pattern — semuanya menyediakan validasi bawaan peramban secara gratis. Gunakan novalidate saat menerapkan validasi kustom dengan JS. Constraint Validation API memberikan JavaScript akses ke status validitas. Atur gaya kesalahan dengan :user-invalid setelah pengguna berinteraksi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Atribut Validasi Formulir” gratis?
Ya — teks lengkap “Atribut Validasi Formulir” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Atribut Validasi Formulir”?
Terapkan atribut required, minlength, maxlength, pattern, min, max, dan step, lalu atur gaya status validasi dengan pseudo-kelas :valid dan :invalid. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Atribut Validasi Formulir” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Kontrol Formulir: tipe input, select, textarea
- ARIA dan Aksesibilitas: label, role, aria-*
- HTML5 Semantik: Semantik vs Sup Div
- Atribut Validasi Formulir