Tombol Kirim ditekan. Dalam hitungan milidetik — sebelum satu byte data berangkat — browser menjalankan pemeriksaan menyeluruh terhadap seluruh kontrol form. Mesin di balik proses ini bernama Constraint Validation, dan memahami cara kerjanya mengubah perilaku yang tadinya terasa acak menjadi alur yang bisa kita baca.

Mesin di Balik Tombol Kirim #

Aturannya: setiap kontrol form membawa daftar kendala (constraint) — required, format type, pattern, min/max/step, panjang teks. Mekanismenya: saat submit dipicu, browser menimbang seluruh kendala pada seluruh kontrol. Bila satu saja tidak terpenuhi, pengiriman dibatalkan: pesan bawaan muncul pada kontrol galat pertama dan fokus keyboard dialihkan ke sana; percobaan kirim berikutnya menyusul memeriksa kontrol galat yang belum beres. Bila semuanya sah, form dikirim seperti biasa.

Alur lengkapnya tergambar ringkas:

Diagram di atas menyederhanakan satu proses pemeriksaan: browser memeriksa kontrol satu per satu mengikuti urutan dokumen, lalu berhenti melaporkan pada temuan pertama.

Urutan Pemeriksaan #

Satu kontrol bisa melanggar beberapa kendala sekaligus — kosong sekaligus salah format. Browser hanya menampilkan satu pesan, dan pesan itu mengikuti urutan pemeriksaan baku.

Mematikan dan Melompati Validasi #

Dua atribut mengendalikan mesin ini. novalidate dipasang pada elemen form dan mematikan seluruh validasi — dipakai saat kita mengganti pesan bawaan dengan sistem penanganan sendiri lewat JavaScript. formnovalidate dipasang pada button dan hanya melompati validasi untuk tombol itu — pola klasik tombol “Simpan draf”:

html 
<form action="/artikel" method="post">
  <label for="judul">Judul artikel</label>
  <input type="text" id="judul" name="judul" required>
  <label for="surel">Email penulis</label>
  <input type="email" id="surel" name="surel" required>
  <button type="submit">Terbitkan</button>
  <button type="submit" formnovalidate formaction="/artikel/draf">Simpan draf</button>
</form>

Uji tiga skenario bernomor pada demo berikut:

  1. Tekan Terbitkan dengan form kosong — pengiriman dibatalkan, pesan bawaan muncul, dan fokus melompat ke kolom judul.
  2. Isi judul, isi email dengan format salah, lalu kirim lagi — kini giliran pesan format email yang tampil; perbaiki dan ulangi.
  3. Isi keduanya dengan benar dan kirim — form lolos seluruh pemeriksaan: pasangan yang berangkat ke https://example.com/artikel tampil di bawah form.

Tombol Simpan draf menempuh jalur berbeda: formnovalidate melewati seluruh pemeriksaan — coba tekan pada form kosong dan bandingkan: panel data langsung muncul dengan pasangan kosong, tanpa satu pun bubble.

Pada demo, action dan formaction diarahkan ke https://example.com/artikel — domain cadangan resmi — dan skrip kecil menahan perpindahan supaya pasangan name=value yang terkirim terlihat di halaman, persis kiriman yang diterima server; markup formnya sama persis dengan contoh di atas.

Mari kita telaah kode di atas:

  1. Baris 6 (type="submit"): tombol Terbitkan menjalankan pemeriksaan penuh — draf tanpa judul ditahan lengkap dengan pesan bawaan dan fokus otomatis.
  2. Baris 7 (formnovalidate): tombol Simpan draf melewati seluruh validasi; artikel setengah jadi tetap terkirim.
  3. Baris 7 (formaction="/artikel/draf"): pengiriman draf diarahkan ke endpoint berbeda — server memisahkan draf dari artikel terbit.
  4. Hasil kombinasi: satu form, dua tombol, dua perilaku validasi — seluruhnya tanpa JavaScript.

Ringkasan #

  • Saat submit, browser menimbang seluruh kendala seluruh kontrol melalui Constraint Validation.
  • Pengiriman gagal menampilkan pesan bawaan dan memfokuskan kontrol galat pertama.
  • Urutan pemeriksaan satu kontrol: required → type → pattern → min/max/step.
  • novalidate mematikan validasi seluruh form; formnovalidate melompatinya untuk satu tombol.

Chapter berikutnya memanfaatkan hasil pemeriksaan itu untuk warna: pseudo-class :valid dan :invalid.