HTML menyediakan validasi bawaan melalui atribut, jadi browser memblokir pengiriman yang tidak valid dan menampilkan pesan — tidak diperlukan JavaScript.
html
Submit
HTML menyediakan validasi bawaan melalui atribut, jadi browser memblokir pengiriman yang tidak valid dan menampilkan pesan — tidak diperlukan JavaScript.
Submit
Atribut validasi: required, min/max, minlength/maxlength, pattern (regex), dan tipe itu sendiri (email, url, number). Saat pengiriman, browser memeriksa atribut tersebut, menghentikan pengiriman jika ada yang gagal, dan menampilkan gelembung asli pada bidang yang tidak valid pertama.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Anda dapat membaca dan menyesuaikan validasi di JavaScript:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidity memungkinkan Anda menambahkan aturan yang tidak dapat diungkapkan oleh atribut (misalnya "konfirmasi kata sandi cocok").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Selalu validasi di server juga — validasi klien adalah untuk UX; pengguna dapat membypassnya.
Validasi asli memberi Anda pesan kesalahan yang dapat diakses, terlokalisasi, dan umpan balik instan secara gratis.
Gabungkan atribut deklaratif dengan API Constraint Validation untuk aturan khusus — tetapi jangan pernah mempercayainya sebagai satu-satunya garis pertahanan Anda; server juga harus memvalidasi.