HTML Academy · Pelajaran

Atribut novalidate

Lumpuhkan pengesahan pelayar apabila menguruskannya sendiri

Pelajaran 2 daripada 414 langkah

Atribut novalidate ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Batasan Pengesahan Pelayar

Pengesahan terbina dalam HTML5 mempunyai batasan:

Mesej ralat bergantung pada pelayar dan sukar digayakan
Pengesahan hanya dijalankan semasa penghantaran, bukan apabila fokus beralih atau semasa input
Peraturan perniagaan yang kompleks (padanan kata laluan, nama pengguna unik) tidak dapat dilaksanakan

Apabila anda memerlukan kawalan penuh, nyahdayakan pengesahan terbina dalam dengan novalidate.

novalidate pada form

Menambahkan novalidate pada form menyahdayakan semua pengesahan pelayar:

<form action="/register" method="post" novalidate>
  <!-- Browser will NOT validate these on submit -->
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="8" required>
  <button type="submit">Register</button>
</form>

Mengapa Menggunakan novalidate?

Sebab biasa untuk menyahdayakan pengesahan pelayar:

Penggayaan mesej ralat tersuai yang sepadan dengan sistem reka bentuk anda
Pengesahan masa nyata (apabila fokus beralih atau semasa input, bukan semasa penghantaran sahaja)
Pengesahan berbilang medan (contohnya pengesahan kata laluan)
Paparan ralat daripada pelayan selepas pengalihan
Pustaka pengesahan pihak ketiga (Zod, Yup, React Hook Form)

Corak Pengesahan Tersuai

Bina pengesahan tersuai dengan novalidate:

<form id="form" novalidate>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <span class="error" id="email-error" role="alert" hidden></span>

  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email');
  const error = document.getElementById('email-error');

  if (!email.value || !email.value.includes('@')) {
    error.textContent = 'Please enter a valid email address.';
    error.hidden = false;
    email.focus();
  } else {
    error.hidden = true;
    // Submit...
  }
});
</script>

formnovalidate pada Butang

Nyahdayakan pengesahan untuk butang penghantaran tertentu tanpa menggunakan novalidate pada keseluruhan form:

<form action="/save" method="post">
  <input type="email" name="email" required>

  <!-- Save as draft: skip validation -->
  <button type="submit" formaction="/save-draft" formnovalidate>
    Save Draft
  </button>

  <!-- Final submit: normal validation -->
  <button type="submit">Submit</button>
</form>

Menggayakan Ralat Tersuai

Penggayaan ralat pengesahan tersuai:

.field-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

input.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

input.valid {
  border-color: #22c55e;
}

Ralat Tersuai yang Boleh Diakses

Jadikan mesej ralat tersuai boleh diakses:

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  aria-describedby="email-error"
  aria-invalid="false"
>
<span id="email-error" role="alert"></span>
<!-- aria-invalid="true" when invalid -->
<!-- role="alert" announces changes to screen readers -->
<!-- aria-describedby links the input to its error message -->

Strategi Masa Pengesahan

Bila hendak melakukan pengesahan dengan novalidate:

Semasa penghantaran — paling mudah; sahkan semuanya sekali gus
Apabila fokus beralih — sahkan setiap medan apabila pengguna meninggalkannya
Semasa input — masa nyata; pengalaman pengguna terbaik tetapi boleh terasa terlalu agresif
Hibrid — sahkan apabila fokus beralih; kosongkan ralat semasa input

Corak Hibrid Fokus Beralih + Input

Pendekatan pengesahan yang paling mesra pengguna:

function validateEmail(input, errorEl) {
  const val = input.value.trim();
  if (!val) {
    showError(input, errorEl, 'Email is required.');
  } else if (!/^[^@]+@[^@]+\.[^@]+$/.test(val)) {
    showError(input, errorEl, 'Enter a valid email address.');
  } else {
    clearError(input, errorEl);
  }
}

input.addEventListener('blur', () => validateEmail(input, errorEl));
input.addEventListener('input', () => {
  // Only clear the error while typing, don't re-validate until blur
  if (input.classList.contains('invalid')) validateEmail(input, errorEl);
});

novalidate dan Pengesahan Pelayan

Sentiasa lakukan pengesahan pada pelayan juga:

Pengesahan pada klien adalah untuk pengalaman pengguna
Pengesahan pada pelayan adalah untuk keselamatan
Pengguna boleh memintas pengesahan HTML dengan mengubah suai permintaan
pengesahan novalidate + JS tersuai hendaklah mencerminkan peraturan pelayan

Pustaka Pengesahan

Pustaka pengesahan JavaScript popular yang boleh digabungkan dengan novalidate:

Zod — pengesahan skema berteraskan TypeScript
Yup — pengesahan skema objek
Valibot — pustaka skema ringan
React Hook Form — keadaan form + pengesahan untuk React

Menguji Pengesahan Tersuai

Cara menguji pengesahan form tersuai:

Uji penghantaran kosong (medan yang diperlukan)
Uji format tidak sah (e-mel yang salah, corak telefon yang salah)
Uji kes pinggiran (ruang sahaja, Unicode, rentetan yang sangat panjang)
Uji dengan pembaca skrin untuk mengesahkan pengumuman ralat
Uji navigasi papan kekunci antara medan selepas ralat dipaparkan

Semakan Ringkas

Apakah yang dilakukan oleh formnovalidate pada butang?

Jawab dalam pelajaran interaktif

Ringkasan: novalidate

Perkara penting tentang novalidate:

novalidate pada form — menyahdayakan semua pengesahan pelayar
formnovalidate pada butang — menyahdayakan pengesahan untuk penghantaran itu sahaja
Gunakan pengesahan tersuai untuk kawalan pengalaman pengguna dan peraturan yang kompleks
Sentiasa lakukan pengesahan pada pelayan — pengesahan klien boleh dipintas
Umumkan ralat dengan cara yang boleh diakses menggunakan role="alert" dan aria-invalid

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Atribut novalidate” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Atribut novalidate”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Atribut novalidate”?

Lumpuhkan pengesahan pelayar apabila menguruskannya sendiri Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Atribut novalidate” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

required pattern min max dan maxlength
Atribut novalidate
Asas API Pengesahan Kekangan
Pertukaran Pengesahan HTML5 dengan JavaScript

← Kembali ke HTML Academy