Native Browser Validation

Section Form Validation mengajarkan kita memasang atribut seperti required, minlength, dan pattern. Chapter ini memandang atribut yang sama dari sudut pandang engine browser. Memahami sisi mesin menjelaskan mengapa validasi terasa tanpa jeda dan apa yang tersimpan di balik pseudo-class :invalid.

Kapan Pemeriksaan Dijalankan #

Pemeriksaan otomatis berjalan pada momen pengiriman: pengunjung menekan tombol submit atau Enter pada kontrol teks. Browser menilai seluruh kontrol pada form satu per satu; bila ada yang gagal, pengiriman dibatalkan — request tidak pernah dibuat — fokus berpindah ke kontrol pertama yang bermasalah, dan balon pesan bawaan muncul di dekatnya. Bila seluruh kontrol sah, browser melanjutkan alur pengiriman pada chapter berikutnya.

Pemeriksaan juga dapat dipicu lewat method checkValidity() dari constraint validation API — pemakaiannya kita latih pada section Form Validation. Tanpa satu baris JavaScript pun, pemeriksaan otomatis tetap berjalan.

Urutan Cek dan Peran novalidate #

Untuk setiap kontrol, browser menilai seluruh batasan yang terpasang, lalu melaporkan kegagalan pertama pada kontrol tersebut; urutan antarproperti mengikuti aturan spesifikasi, bukan urutan atribut di markup. Kontrol pertama yang gagal menerima fokus dan satu pesan. Atribut novalidate pada form dan formnovalidate pada tombol melewati seluruh proses ini — perilaku yang kita latih pada chapter Validasi Browser.

ValidityState: Rincian Status per Kontrol #

Setiap kontrol menyimpan objek ValidityState — kumpulan properti boolean yang merinci alasan kegagalan. Tabel berikut merangkum seluruhnya:

Properti valid hanya bernilai true bila semua properti lain bernilai false. Pesan bawaan dipilih browser berdasarkan properti mana yang gagal — itulah sebabnya pesan kolom kosong, pesan format email, dan pesan pola terasa berbeda.

Contoh dan Hasil di Berbagai Kondisi #

File berikut adalah form pendaftaran anggota perpustakaan dengan tiga kontrol berbeda batasan. Simpan sebagai contoh-validasi-native.html:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pendaftaran Anggota Perpustakaan</title>
</head>
<body>
  <h1>Pendaftaran Anggota</h1>
  <form action="/pendaftaran" method="post">
    <p>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>
    </p>
    <p>
      <label for="nama">Nama pengguna</label>
      <input type="text" id="nama" name="nama" minlength="4" pattern="[A-Za-z0-9]+" required>
    </p>
    <p>
      <label for="usia">Usia</label>
      <input type="number" id="usia" name="usia" min="17" max="70" required>
    </p>
    <p>
      <input type="submit" value="Daftar">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Form dengan tiga kolom: Email, Nama pengguna, dan Usia
  - Setiap submit dalam keadaan tidak sah memunculkan balon pesan
    di kontrol pertama yang gagal, tanpa halaman berpindah
  - Submit dengan seluruh kolom sah membuat browser menavigasi ke /pendaftaran

Berikut peran setiap bagian form tersebut:

1. Baris 10 (<form>): tanpa novalidate, seluruh batasan di bawahnya dieksekusi saat submit.
2. Baris 13 (input email): required memicu valueMissing bila kosong, dan type="email" memicu typeMismatch bila formatnya keliru.
3. Baris 17 (input nama pengguna): minlength="4" memicu tooShort, sedangkan pattern="[A-Za-z0-9]+" menolak spasi dan simbol lewat patternMismatch.
4. Baris 21 (input usia): min="17" dan max="70" memicu rangeUnderflow dan rangeOverflow; nilai bukan angka memicu badInput.
5. Baris 24 (tombol submit): satu-satunya pemicu pemeriksaan pada halaman ini; tanpa JavaScript tambahan, seluruh siklus berjalan di mesin browser.

Tabel berikut menghubungkan kondisi uji dengan hasilnya:

Chapter berikutnya mengikuti perjalanan data yang lolos pemeriksaan itu: dari perakitan form data set, pengodean, hingga request yang teramati di DevTools.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Constraint validation
• MDN Web Docs — ValidityState
• WHATWG — HTML Living Standard: Constraint validation

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pendaftaran Anggota Perpustakaan</title>
</head>
<body>
  <h1>Pendaftaran Anggota</h1>
  <form action="/pendaftaran" method="post">
    <p>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>
    </p>
    <p>
      <label for="nama">Nama pengguna</label>
      <input type="text" id="nama" name="nama" minlength="4" pattern="[A-Za-z0-9]+" required>
    </p>
    <p>
      <label for="usia">Usia</label>
      <input type="number" id="usia" name="usia" min="17" max="70" required>
    </p>
    <p>
      <input type="submit" value="Daftar">
    </p>
  </form>
</body>
</html>