Formulir JavaScript

Verifikasi Formulir JavaScript

Verifikasi formulir HTML dapat diselesaikan dengan JavaScript.

Jika bidang formulir (fname) kosong, fungsi ini akan menampilkan pesan dan kembali false untuk mencegah pengiriman formulir:

Contoh JavaScript

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

Fungsi ini dapat dipanggil saat mengirim formulir:

Contoh Formulir HTML

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Coba sendiri

JavaScript dapat memverifikasi input angka

JavaScript biasanya digunakan untuk memverifikasi input angka:

Masukkan angka antara 1 dan 10:

Coba sendiri

Verifikasi Formulir HTML Otomatis

Verifikasi formulir HTML dapat dijalankan otomatis oleh browser:

Jika bidang formulir (fname) kosong, maka required Atribut akan mencegah pengiriman formulir ini:

Contoh Formulir HTML

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

Coba sendiri

Tips:Verifikasi formulir HTML otomatis tidak berfungsi di Internet Explorer 9 atau versi yang lebih awal.

Verifikasi Data

Verifikasi data adalah proses untuk memastikan input pengguna bersih, benar, dan berguna.

Tugas verifikasi yang biasa adalah:

  • Apakah pengguna mengisi semua bidang yang wajib diisi?
  • Apakah pengguna memasukkan tanggal yang valid?
  • Apakah pengguna memasukkan teks di bidang angka?

Sebagian besar kasus, tujuannya adalah untuk memastikan input pengguna benar.

Verifikasi dapat ditentukan dengan berbagai metode dan dipasang dengan berbagai cara.

Verifikasi sisi server dijalankan oleh server Web setelah input dikirim ke server.

Sebelum mengirimkan input ke server Web, verifikasi klien dijalankan oleh browser Web.

Verifikasi Kewajiban HTML

HTML5 memperkenalkan konsep verifikasi HTML baru yang disebut verifikasi kewajiban.

Validasi Kekurangan HTML berdasarkan:

  • Atribut Validasi Kekurangan HTML Input
  • Pseudo-Pemilih Validasi Kekurangan CSS
  • Atribut dan Metode Validasi DOM

Atribut Validasi Kekurangan HTML Input

Atribut Deskripsi
disabled Tentukan penggunaan elemen input harus di nonaktifkan.
max Tentukan nilai maksimum elemen input.
min Tentukan nilai minimum elemen input.
pattern Tentukan pola nilai elemen input.
required Tentukan kolom input wajib diisi.
type Tentukan jenis elemen input.

Untuk daftar lengkap, silakan kunjungi Atribut Input HTML.

Pseudo-Pemilih Validasi Kekurangan CSS

Pemilih Deskripsi
:disabled Pilih elemen input yang menentukan atribut "disabled".
:invalid Pilih elemen input yang memiliki nilai yang tidak berlaku.
:optional Pilih elemen input yang belum menentukan atribut "required".
:required Pilih elemen input yang menentukan atribut "required".
:valid Pilih elemen input yang memiliki nilai yang berlaku.

Untuk daftar lengkap, silakan kunjungi Pseudo-Klas CSS.