Cara memeriksa validator bidang yang diperlukan dalam javascript

Buka situs populer mana pun dengan formulir pendaftaran, dan Anda akan melihat bahwa mereka memberikan umpan balik saat Anda tidak memasukkan data Anda dalam format yang mereka harapkan. Anda akan mendapatkan pesan seperti

• "Bidang ini wajib diisi" (Anda tidak boleh mengosongkan bidang ini)
• "Masukkan nomor telepon Anda dalam format xxx-xxxx" (Diperlukan format data tertentu agar dianggap valid)
• "Silakan masukkan alamat email yang valid" (format data yang Anda masukkan tidak benar)
• "Kata sandi Anda harus antara 8 dan 30 karakter dan berisi satu huruf besar, satu simbol, dan angka. " (Diperlukan format data yang sangat spesifik untuk data Anda)

Ini disebut validasi formulir. Saat Anda memasukkan data, browser dan/atau server web akan memeriksa apakah data dalam format yang benar dan dalam batasan yang ditetapkan oleh aplikasi. Validasi yang dilakukan di browser disebut validasi sisi klien, sedangkan validasi yang dilakukan di server disebut validasi sisi server. Dalam bab ini kami berfokus pada validasi sisi klien

Jika informasi diformat dengan benar, aplikasi memungkinkan data dikirimkan ke server dan (biasanya) disimpan dalam database;

Kami ingin mengisi formulir web semudah mungkin. Jadi mengapa kami bersikeras untuk memvalidasi formulir kami?

• Kami ingin mendapatkan data yang tepat, dalam format yang tepat. Aplikasi kami tidak akan berfungsi dengan baik jika data pengguna kami disimpan dalam format yang salah, salah, atau dihilangkan sama sekali
• Kami ingin melindungi data pengguna kami. Memaksa pengguna kami untuk memasukkan kata sandi yang aman memudahkan untuk melindungi informasi akun mereka
• Kami ingin melindungi diri kami sendiri. Ada banyak cara pengguna jahat dapat menyalahgunakan formulir yang tidak dilindungi untuk merusak aplikasi. Lihat Keamanan situs web

  Peringatan. Jangan pernah mempercayai data yang dikirimkan ke server Anda dari klien. Bahkan jika formulir Anda divalidasi dengan benar dan mencegah input yang salah di sisi klien, pengguna jahat masih dapat mengubah permintaan jaringan

Ada dua jenis validasi sisi klien yang akan Anda temui di web

• Validasi formulir bawaan menggunakan fitur validasi formulir HTML, yang telah kita bahas di banyak tempat di seluruh modul ini. Validasi ini umumnya tidak memerlukan banyak JavaScript. Validasi formulir bawaan memiliki kinerja yang lebih baik daripada JavaScript, tetapi tidak dapat disesuaikan seperti validasi JavaScript
• Validasi JavaScript dikodekan menggunakan JavaScript. Validasi ini sepenuhnya dapat disesuaikan, tetapi Anda harus membuat semuanya (atau menggunakan pustaka)

Salah satu fitur terpenting dari kontrol formulir modern adalah kemampuan untuk memvalidasi sebagian besar data pengguna tanpa bergantung pada JavaScript. Ini dilakukan dengan menggunakan atribut validasi pada elemen formulir. Kami telah melihat banyak dari ini di awal kursus, tetapi untuk rekap

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  _8. Menentukan apakah bidang formulir perlu diisi sebelum formulir dapat dikirimkan

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  9 dan

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  0. Menentukan panjang minimum dan maksimum data tekstual (string)

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  1 dan

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  2. Menentukan nilai minimum dan maksimum dari jenis input numerik

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  _3. Menentukan apakah data harus berupa angka, alamat email, atau jenis prasetel tertentu lainnya

• <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  _4. Menentukan ekspresi reguler yang menentukan pola yang harus diikuti oleh data yang dimasukkan

Jika data yang dimasukkan dalam kolom formulir mengikuti semua aturan yang ditentukan oleh atribut di atas, maka dianggap valid. Jika tidak, maka dianggap tidak sah

Ketika suatu elemen valid, hal-hal berikut ini benar

• Elemen cocok dengan pseudo-class

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  5 CSS, yang memungkinkan Anda menerapkan gaya tertentu ke elemen yang valid
• Jika pengguna mencoba mengirim data, browser akan mengirimkan formulir, asalkan tidak ada lagi yang menghentikannya (mis. g. , JavaScript)

Ketika suatu elemen tidak valid, hal-hal berikut ini benar

• Elemen ini cocok dengan kelas semu

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  6 CSS, dan terkadang kelas semu UI lainnya (mis. g. ,

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  7) bergantung pada kesalahan, yang memungkinkan Anda menerapkan gaya tertentu ke elemen yang tidak valid
• Jika pengguna mencoba mengirim data, browser akan memblokir formulir dan menampilkan pesan kesalahan

Catatan. Ada beberapa kesalahan yang akan mencegah pengiriman formulir, termasuk

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

Di bagian ini, kita akan menguji beberapa atribut yang telah kita bahas di atas

Mari kita mulai dengan contoh sederhana. masukan yang memungkinkan Anda untuk memilih apakah Anda lebih suka pisang atau ceri. Contoh ini melibatkan teks sederhana

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
  <button>Submit</button>
</form>

<form>
  <label for="choose">Would you prefer a banana or cherry?</label>
  <input id="choose" name="i-like" />
  <button>Submit</button>
</form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Untuk memulai, buat salinan

<form>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
  <button>Submit</button>
</form>

Fitur validasi HTML yang paling sederhana adalah atribut

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

Tambahkan atribut

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

Perhatikan CSS yang disertakan dalam file contoh

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

CSS ini menyebabkan input memiliki batas putus-putus merah saat tidak valid dan batas hitam pekat yang lebih halus saat valid. Kami juga menambahkan gradien latar belakang saat input diperlukan dan tidak valid. Cobalah perilaku baru dalam contoh di bawah ini

Catatan. Anda dapat menemukan contoh ini langsung di GitHub sebagai validasi buah. html. Lihat juga kode sumbernya

Coba kirimkan formulir tanpa nilai. Perhatikan bagaimana input yang tidak valid mendapat fokus, pesan kesalahan default ("Silakan isi kolom ini") muncul, dan formulir dicegah untuk dikirim

Kehadiran atribut

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
  <button>Submit</button>
</form>

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
  <button>Submit</button>
</form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

Catatan. Untuk pengalaman pengguna yang baik, beri tahu pengguna kapan bidang formulir diperlukan. Ini bukan hanya pengalaman pengguna yang baik, tetapi juga diwajibkan oleh pedoman aksesibilitas WCAG. Juga, hanya minta pengguna untuk memasukkan data yang benar-benar Anda butuhkan. Misalnya, mengapa Anda benar-benar perlu mengetahui jenis kelamin atau gelar seseorang?

Fitur validasi berguna lainnya adalah atribut

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

Regexp cukup rumit, dan kami tidak bermaksud untuk mengajari Anda secara mendalam di artikel ini. Di bawah ini adalah beberapa contoh untuk memberi Anda ide dasar tentang cara kerjanya

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2 — Mencocokkan satu karakter yaitu

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2 (bukan

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  4, bukan

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  5, dan seterusnya)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  6 — Kecocokan

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2, diikuti oleh

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  4, diikuti oleh

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  9

• <form>
    <div>
      <label for="choose">Would you prefer a banana or a cherry?</label>
      <input
        type="text"
        id="choose"
        name="i-like"
        required
        minlength="6"
        maxlength="6" />
    </div>
    <div>
      <label for="number">How many would you like?</label>
      <input type="number" id="number" name="amount" value="1" min="1" max="10" />
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>
  

  0 — Kecocokan

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2, secara opsional diikuti oleh satu

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  4, diikuti oleh

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  9. (

  <form>
    <div>
      <label for="choose">Would you prefer a banana or a cherry?</label>
      <input
        type="text"
        id="choose"
        name="i-like"
        required
        minlength="6"
        maxlength="6" />
    </div>
    <div>
      <label for="number">How many would you like?</label>
      <input type="number" id="number" name="amount" value="1" min="1" max="10" />
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>
  

  _4 atau

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  6)

• <form>
    <div>
      <label for="choose">Would you prefer a banana or a cherry?</label>
      <input
        type="text"
        id="choose"
        name="i-like"
        required
        minlength="6"
        maxlength="6" />
    </div>
    <div>
      <label for="number">How many would you like?</label>
      <input type="number" id="number" name="amount" value="1" min="1" max="10" />
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>
  

  6 — Kecocokan

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2, secara opsional diikuti oleh sejumlah

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  4s, diikuti oleh

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  9. (

  <form>
    <div>
      <label for="choose">Would you prefer a banana or a cherry?</label>
      <input
        type="text"
        id="choose"
        name="i-like"
        required
        minlength="6"
        maxlength="6" />
    </div>
    <div>
      <label for="number">How many would you like?</label>
      <input type="number" id="number" name="amount" value="1" min="1" max="10" />
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>
  

  4,

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  6,

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  
  div {
    margin-bottom: 10px;
  }
  

  2, dan seterusnya)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  
  div {
    margin-bottom: 10px;
  }
  

  3 — Mencocokkan satu karakter yaitu

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2 atau

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  4

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  
  div {
    margin-bottom: 10px;
  }
  

  6 — Sama persis dengan

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  6 atau persis

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  
  div {
    margin-bottom: 10px;
  }
  

  8 (tetapi tidak

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  
  div {
    margin-bottom: 10px;
  }
  

  9 atau

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  2 atau

  <form>
    <p>
      <fieldset>
        <legend>Do you have a driver's license?<span aria-label="required">*</span></legend>
        <!-- While only one radio button in a same-named group can be selected at a time,
             and therefore only one radio button in a same-named group having the "required"
             attribute suffices in making a selection a requirement -->
        <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label>
        <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
      </fieldset>
    </p>
    <p>
      <label for="n1">How old are you?</label>
      <!-- The pattern attribute can act as a fallback for browsers which
           don't implement the number input type but support the pattern attribute.
           Please note that browsers that support the pattern attribute will make it
           fail silently when used with a number field.
           Its usage here acts only as a fallback -->
      <input type="number" min="12" max="120" step="1" id="n1" name="age"
             pattern="\d+">
    </p>
    <p>
      <label for="t1">What's your favorite fruit?<span aria-label="required">*</span></label>
      <input type="text" id="t1" name="fruit" list="l1" required
             pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
      <datalist id="l1">
        <option>Banana</option>
        <option>Cherry</option>
        <option>Apple</option>
        <option>Strawberry</option>
        <option>Lemon</option>
        <option>Orange</option>
      </datalist>
    </p>
    <p>
      <label for="t2">What's your email address?</label>
      <input type="email" id="t2" name="email">
    </p>
    <p>
      <label for="t3">Leave a short message</label>
      <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
    </p>
    <p>
      <button>Submit</button>
    </p>
  </form>
  

  1, dan seterusnya)

Masih banyak lagi kemungkinan yang tidak kami bahas di sini. Untuk daftar lengkap dan banyak contoh, lihat dokumentasi Ekspresi reguler kami

Mari kita terapkan sebuah contoh. Perbarui HTML Anda untuk menambahkan atribut

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

<form>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
  <button>Submit</button>
</form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Ini memberi kami pembaruan berikut — cobalah

Catatan. Anda dapat menemukan contoh ini langsung di GitHub sebagai pola buah. html (lihat juga kode sumber. )

Dalam contoh ini, elemen

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

Pada titik ini, coba ubah nilai di dalam atribut

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

Jika nilai tidak kosong dari

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
  <button>Submit</button>
</form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

Catatan. Beberapa tipe elemen

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

form {
  font: 1em sans-serif;
  max-width: 320px;
}

p > label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  width: 100%;
  border: 1px solid #333;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}

form {
  font: 1em sans-serif;
  max-width: 320px;
}

p > label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  width: 100%;
  border: 1px solid #333;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}

Catatan. Elemen

form {
  font: 1em sans-serif;
  max-width: 320px;
}

p > label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  width: 100%;
  border: 1px solid #333;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

Anda dapat membatasi panjang karakter semua bidang teks yang dibuat oleh

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

form {
  font: 1em sans-serif;
  max-width: 320px;
}

p > label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  width: 100%;
  border: 1px solid #333;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

Peramban sering kali tidak mengizinkan pengguna mengetik nilai yang lebih panjang dari yang diharapkan ke dalam bidang teks. Pengalaman pengguna yang lebih baik daripada hanya menggunakan

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

Untuk bidang angka (mis. e.

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

Mari kita lihat contoh lain. Buat salinan baru dari awal buah. html

Sekarang hapus isi elemen

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <div>
    <label for="choose">Would you prefer a banana or a cherry?</label>
    <input
      type="text"
      id="choose"
      name="i-like"
      required
      minlength="6"
      maxlength="6" />
  </div>
  <div>
    <label for="number">How many would you like?</label>
    <input type="number" id="number" name="amount" value="1" min="1" max="10" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

• Di sini Anda akan melihat bahwa kami telah memberikan

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  06 bidang

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  9 dan

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  0 dari enam, yang panjangnya sama dengan pisang dan ceri
• Kami juga telah memberikan bidang

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  _09

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  1 dari satu dan

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  2 dari sepuluh. Angka yang dimasukkan di luar rentang ini akan ditampilkan sebagai tidak valid; . Jika pengguna secara manual memasukkan nomor di luar rentang ini, datanya tidak valid. Angka tidak diperlukan, jadi menghapus nilai tetap akan menghasilkan nilai yang valid

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

div {
  margin-bottom: 10px;
}

Berikut adalah contoh yang berjalan langsung

Catatan. Anda dapat menemukan contoh ini langsung di GitHub sebagai panjang buah. html. Lihat juga kode sumbernya

Catatan.

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Berikut adalah contoh lengkap untuk menunjukkan penggunaan fitur validasi bawaan HTML. Pertama, beberapa HTML

<form>
  <p>
    <fieldset>
      <legend>Do you have a driver's license?<span aria-label="required">*</span></legend>
      <!-- While only one radio button in a same-named group can be selected at a time,
           and therefore only one radio button in a same-named group having the "required"
           attribute suffices in making a selection a requirement -->
      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label>
      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
    </fieldset>
  </p>
  <p>
    <label for="n1">How old are you?</label>
    <!-- The pattern attribute can act as a fallback for browsers which
         don't implement the number input type but support the pattern attribute.
         Please note that browsers that support the pattern attribute will make it
         fail silently when used with a number field.
         Its usage here acts only as a fallback -->
    <input type="number" min="12" max="120" step="1" id="n1" name="age"
           pattern="\d+">
  </p>
  <p>
    <label for="t1">What's your favorite fruit?<span aria-label="required">*</span></label>
    <input type="text" id="t1" name="fruit" list="l1" required
           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
    <datalist id="l1">
      <option>Banana</option>
      <option>Cherry</option>
      <option>Apple</option>
      <option>Strawberry</option>
      <option>Lemon</option>
      <option>Orange</option>
    </datalist>
  </p>
  <p>
    <label for="t2">What's your email address?</label>
    <input type="email" id="t2" name="email">
  </p>
  <p>
    <label for="t3">Leave a short message</label>
    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
  </p>
  <p>
    <button>Submit</button>
  </p>
</form>

Dan sekarang beberapa CSS untuk menata HTML

form {
  font: 1em sans-serif;
  max-width: 320px;
}

p > label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  width: 100%;
  border: 1px solid #333;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}

Ini diterjemahkan sebagai berikut

Lihat daftar lengkap atribut yang dapat digunakan untuk membatasi nilai input dan tipe input yang mendukungnya

Catatan. Anda dapat menemukan contoh ini langsung di GitHub sebagai contoh lengkap. html (lihat juga kode sumber. )

Anda harus menggunakan JavaScript jika ingin mengontrol tampilan dan nuansa pesan kesalahan asli. Pada bagian ini kita akan melihat berbagai cara untuk melakukan ini

Constraint Validation API terdiri dari sekumpulan metode dan properti yang tersedia pada antarmuka DOM elemen formulir berikut

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  18 (mewakili elemen

  <form>
    <label for="choose">Would you prefer a banana or a cherry?</label>
    <input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
    <button>Submit</button>
  </form>
  

  0)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  20 (mewakili elemen

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  21)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  22 (mewakili elemen

  input:invalid {
    border: 2px dashed red;
  }
  
  input:invalid:required {
    background-image: linear-gradient(to right, pink, lightgreen);
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  8)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  24 (mewakili elemen

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  25)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  26 (mewakili elemen

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  27)

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  28 (mewakili elemen

  form {
    font: 1em sans-serif;
    max-width: 320px;
  }
  
  p > label {
    display: block;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="number"],
  textarea,
  fieldset {
    width: 100%;
    border: 1px solid #333;
    box-sizing: border-box;
  }
  
  input:invalid {
    box-shadow: 0 0 5px 1px red;
  }
  
  input:focus:invalid {
    box-shadow: none;
  }
  

  2)

Constraint Validation API menyediakan properti berikut pada elemen di atas

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  _30. Mengembalikan pesan lokal yang menjelaskan batasan validasi yang tidak dipenuhi oleh kontrol (jika ada). Jika kontrol bukan kandidat untuk validasi batasan (

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  31 adalah

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  32) atau nilai elemen memenuhi batasannya (valid), ini akan mengembalikan string kosong

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  _33. Mengembalikan objek

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  _34 yang berisi beberapa properti yang menjelaskan status validitas elemen. Anda dapat menemukan detail lengkap dari semua properti yang tersedia di halaman referensi

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  34;

  • <form>
      <label for="choose">Would you prefer a banana or cherry? (required)</label>
      <input id="choose" name="i-like" required />
      <button>Submit</button>
    </form>
    

    _9. Mengembalikan

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    _37 jika nilainya tidak cocok dengan yang ditentukan, dan

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 jika cocok. Jika true, elemen tersebut cocok dengan pseudo-class

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)</label>
      <input id="choose" name="i-like" required />
      <button>Submit</button>
    </form>
    

    6 CSS

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:invalid:required {
      background-image: linear-gradient(to right, pink, lightgreen);
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    3. Mengembalikan

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    _37 jika nilainya lebih panjang dari panjang maksimum yang ditentukan oleh atribut, atau

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 jika lebih pendek dari atau sama dengan maksimum. Jika true, elemen tersebut cocok dengan pseudo-class

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)</label>
      <input id="choose" name="i-like" required />
      <button>Submit</button>
    </form>
    

    6 CSS

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:invalid:required {
      background-image: linear-gradient(to right, pink, lightgreen);
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    4. Mengembalikan

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    _37 jika nilainya lebih pendek dari panjang minimum yang ditentukan oleh atribut, atau

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 jika lebih besar dari atau sama dengan minimum. Jika true, elemen tersebut cocok dengan pseudo-class

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)</label>
      <input id="choose" name="i-like" required />
      <button>Submit</button>
    </form>
    

    6 CSS

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:invalid:required {
      background-image: linear-gradient(to right, pink, lightgreen);
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    0. Mengembalikan

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    _37 jika nilainya lebih besar dari maksimum yang ditentukan oleh atribut, atau

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 jika kurang dari atau sama dengan maksimum. Jika benar, elemen tersebut cocok dengan pseudo-class

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)</label>
      <input id="choose" name="i-like" required />
      <button>Submit</button>
    </form>
    

    _6 dan

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)</label>
      <input id="choose" name="i-like" required />
      <button>Submit</button>
    </form>
    

    7 CSS

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:invalid:required {
      background-image: linear-gradient(to right, pink, lightgreen);
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    1. Mengembalikan

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    _37 jika nilainya kurang dari minimum yang ditentukan oleh atribut, atau

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 jika lebih besar dari atau sama dengan minimum. Jika benar, elemen tersebut cocok dengan pseudo-class

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)</label>
      <input id="choose" name="i-like" required />
      <button>Submit</button>
    </form>
    

    _6 dan

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)</label>
      <input id="choose" name="i-like" required />
      <button>Submit</button>
    </form>
    

    7 CSS

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:invalid:required {
      background-image: linear-gradient(to right, pink, lightgreen);
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    5. Mengembalikan

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    _37 jika nilainya tidak sesuai dengan sintaks yang diperlukan (kapan

    form {
      font: 1em sans-serif;
      max-width: 320px;
    }
    
    p > label {
      display: block;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="number"],
    textarea,
    fieldset {
      width: 100%;
      border: 1px solid #333;
      box-sizing: border-box;
    }
    
    input:invalid {
      box-shadow: 0 0 5px 1px red;
    }
    
    input:focus:invalid {
      box-shadow: none;
    }
    

    0 atau

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    67), atau

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 jika sintaksnya benar. Jika

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    _37, elemen cocok dengan pseudo-class CSS

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)</label>
      <input id="choose" name="i-like" required />
      <button>Submit</button>
    </form>
    

    6

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    _71. Mengembalikan

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    _37 jika elemen memenuhi semua batasan validasinya, dan karenanya dianggap valid, atau

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 jika gagal dalam batasan apa pun. Jika true, elemen tersebut cocok dengan pseudo-class

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)</label>
      <input id="choose" name="i-like" required />
      <button>Submit</button>
    </form>
    

    5 CSS;

  • input:invalid {
      border: 2px dashed red;
    }
    
    input:invalid:required {
      background-image: linear-gradient(to right, pink, lightgreen);
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    6. Mengembalikan

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    _37 jika elemen memiliki atribut, tetapi tidak memiliki nilai, atau

    input:invalid {
      border: 2px dashed red;
    }
    
    input:valid {
      border: 2px solid black;
    }
    

    32 sebaliknya. Jika true, elemen tersebut cocok dengan pseudo-class

    <form>
      <label for="choose">Would you prefer a banana or cherry? (required)</label>
      <input id="choose" name="i-like" required />
      <button>Submit</button>
    </form>
    

    6 CSS

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  _31. Mengembalikan

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  _37 jika elemen akan divalidasi saat formulir dikirimkan;

Constraint Validation API juga menyediakan metode berikut pada elemen di atas dan elemen

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  _85. Mengembalikan

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  _37 jika nilai elemen tidak memiliki masalah validitas; . Jika elemennya tidak valid, metode ini juga mengaktifkan event

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  88 pada elemen tersebut

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  _89. Melaporkan kolom yang tidak valid menggunakan peristiwa. Metode ini berguna dalam kombinasi dengan

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  _90 dalam event handler

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  91

• input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  _92. Menambahkan pesan kesalahan khusus ke elemen; . Ini memungkinkan Anda menggunakan kode JavaScript untuk menetapkan kegagalan validasi selain yang ditawarkan oleh batasan validasi HTML standar. Pesan ditampilkan kepada pengguna saat melaporkan masalah

Menerapkan pesan kesalahan yang disesuaikan

Seperti yang Anda lihat di contoh kendala validasi HTML sebelumnya, setiap kali pengguna mencoba mengirimkan formulir yang tidak valid, browser akan menampilkan pesan kesalahan. Cara pesan ini ditampilkan tergantung pada browser

Pesan otomatis ini memiliki dua kelemahan

• Tidak ada cara standar untuk mengubah tampilan dan nuansa mereka dengan CSS
• Mereka bergantung pada lokal browser, yang berarti Anda dapat memiliki halaman dalam satu bahasa tetapi pesan kesalahan ditampilkan dalam bahasa lain, seperti yang terlihat pada tangkapan layar Firefox berikut

Menyesuaikan pesan error ini adalah salah satu kasus penggunaan yang paling umum dari Constraint Validation API. Mari kita bekerja melalui contoh sederhana bagaimana melakukan ini

Kita akan mulai dengan beberapa HTML sederhana (jangan ragu untuk meletakkannya di file HTML kosong; gunakan salinan baru dari fruit-start. html sebagai dasar, jika Anda suka)

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Dan tambahkan JavaScript berikut ke halaman

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Di sini kita menyimpan referensi ke masukan email, lalu menambahkan pendengar acara ke dalamnya yang menjalankan kode yang terkandung setiap kali nilai di dalam masukan diubah

Di dalam kode yang terkandung, kami memeriksa apakah properti

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Jika properti

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Anda dapat mencobanya di bawah ini

Catatan. Anda dapat menemukan contoh ini langsung di GitHub sebagai pesan kesalahan khusus. html (lihat juga kode sumber. )

Contoh yang lebih detail

Sekarang kita telah melihat contoh yang sangat sederhana, mari kita lihat bagaimana kita dapat menggunakan API ini untuk membuat validasi kustom yang sedikit lebih rumit

Pertama, HTML. Sekali lagi, jangan ragu untuk membangun ini bersama kami

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Formulir sederhana ini menggunakan atribut untuk mematikan validasi otomatis browser; . Namun, ini tidak menonaktifkan dukungan untuk API validasi kendala atau penerapan kelas semu CSS seperti

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

Masukan kami untuk memvalidasi adalah

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Kami bertujuan untuk menampilkan pesan kesalahan di dalam elemen

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input id="choose" name="i-like" required />
  <button>Submit</button>
</form>

Catatan. Poin utama di sini adalah pengaturan atribut

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Sekarang ke beberapa CSS dasar untuk sedikit meningkatkan tampilan formulir, dan memberikan beberapa umpan balik visual saat input data tidak valid

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Sekarang mari kita lihat JavaScript yang mengimplementasikan validasi kesalahan kustom

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Komentar menjelaskan banyak hal dengan cukup baik, tetapi singkat

• Setiap kali kami mengubah nilai input, kami memeriksa untuk melihat apakah itu berisi data yang valid. Jika sudah maka kami menghapus pesan kesalahan apa pun yang ditampilkan. Jika data tidak valid, kami menjalankan

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  _08 untuk menunjukkan kesalahan yang sesuai
• Setiap kali kami mencoba mengirimkan formulir, kami kembali memeriksa apakah datanya valid. Jika demikian, kami membiarkan formulir dikirimkan. Jika tidak, kami menjalankan

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  _08 untuk menunjukkan kesalahan yang sesuai, dan menghentikan pengiriman formulir dengan

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  90
• Fungsi

  <form>
    <label for="choose">Would you prefer a banana or cherry? (required)</label>
    <input id="choose" name="i-like" required />
    <button>Submit</button>
  </form>
  

  _08 menggunakan berbagai properti dari objek

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  33 input untuk menentukan apa kesalahannya, dan kemudian menampilkan pesan kesalahan yang sesuai

Inilah hasil langsungnya

Catatan. Anda dapat menemukan contoh ini langsung di GitHub sebagai detail-custom-validation. html. Lihat juga kode sumbernya

API validasi kendala memberi Anda alat yang ampuh untuk menangani validasi formulir, memungkinkan Anda memiliki kontrol besar atas antarmuka pengguna di atas dan di luar apa yang dapat Anda lakukan dengan HTML dan CSS saja

Dalam beberapa kasus, seperti kontrol khusus, Anda tidak akan dapat atau tidak ingin menggunakan API Validasi Kendala. Anda masih dapat menggunakan JavaScript untuk memvalidasi formulir Anda, tetapi Anda hanya perlu menulis sendiri

Untuk memvalidasi formulir, tanyakan pada diri sendiri beberapa pertanyaan

Anda perlu menentukan cara memvalidasi data Anda. operasi string, konversi tipe, ekspresi reguler, dan sebagainya. Terserah kamu

Ini jelas masalah UI. Anda harus memutuskan bagaimana bentuk akan berperilaku. Apakah formulir tetap mengirim data?

Untuk mengurangi frustrasi pengguna, sangat penting untuk memberikan informasi bermanfaat sebanyak mungkin untuk memandu mereka dalam memperbaiki masukan mereka. Anda harus menawarkan saran di awal agar mereka tahu apa yang diharapkan, serta menghapus pesan kesalahan. Jika Anda ingin mempelajari persyaratan UI validasi formulir, berikut adalah beberapa artikel bermanfaat yang harus Anda baca

• Bantu pengguna memasukkan data yang benar dalam formulir
• Memvalidasi masukan
• Cara Melaporkan Kesalahan dalam Formulir. 10 Pedoman Desain

Contoh yang tidak menggunakan API validasi kendala

Untuk mengilustrasikannya, berikut ini adalah versi sederhana dari contoh sebelumnya tanpa Constraint Validation API

HTML hampir sama;

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Demikian pula, CSS tidak perlu banyak berubah;

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Perubahan besar ada pada kode JavaScript, yang perlu melakukan lebih banyak pekerjaan berat

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Hasilnya terlihat seperti ini

Seperti yang Anda lihat, tidak sulit untuk membuat sistem validasi sendiri. Bagian yang sulit adalah membuatnya cukup umum untuk digunakan lintas platform dan pada formulir apa pun yang mungkin Anda buat. Ada banyak pustaka yang tersedia untuk melakukan validasi formulir, seperti Validasi. js

Anda telah mencapai bagian akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? . Validasi formulir

Validasi formulir sisi klien terkadang memerlukan JavaScript jika Anda ingin menyesuaikan gaya dan pesan kesalahan, tetapi selalu mengharuskan Anda untuk memikirkan pengguna dengan hati-hati. Selalu ingat untuk membantu pengguna Anda memperbaiki data yang mereka berikan. Untuk itu, pastikan untuk

• Tampilkan pesan kesalahan eksplisit
• Jadilah permisif tentang format input
• Tunjukkan dengan tepat di mana kesalahan terjadi, terutama pada formulir besar

Setelah Anda memeriksa bahwa formulir diisi dengan benar, formulir dapat dikirimkan. Kami akan membahas pengiriman data formulir berikutnya

Bagaimana cara memeriksa bidang yang diperlukan dalam JavaScript?

Bagaimana cara memanggil validasi bidang yang diperlukan dengan JavaScript?

Apa yang diperlukan validasi lapangan?

Bagaimana cara memeriksa validasi pada pengiriman formulir di JavaScript?