tutorial pengembangan web terbaru
 

JavaScript Bentuk


JavaScript Form Validasi

HTML validasi form bisa dilakukan oleh JavaScript.

Jika bentuk bidang (fname) kosong, fungsi ini lansiran pesan, dan mengembalikan false, untuk mencegah bentuk dari yang diajukan:

Contoh JavaScript

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

fungsi tersebut dapat dipanggil ketika formulir dikirimkan:

Form Contoh HTML

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

HTML Form Validasi

bentuk HTML validasi dapat dilakukan secara otomatis oleh browser:

Jika bentuk bidang (fname) kosong, yang required atribut mencegah bentuk dari yang diajukan:

Form Contoh HTML

<form action="demo_form.asp" method="post">
  <input type="text" name="fname" required >
  <input type="submit" value="Submit">
</form>
Cobalah sendiri "

Otomatis bentuk HTML validasi tidak bekerja di Internet Explorer 9 atau sebelumnya.


Validasi data

Validasi data adalah proses untuk memastikan bahwa masukan komputer bersih, benar, dan berguna.

tugas validasi khas adalah:

  • memiliki pengguna mengisi semua bidang yang diperlukan?
  • telah pengguna memasuki tanggal yang valid?
  • telah pengguna memasukkan teks dalam bidang numerik?

Paling sering, tujuan dari validasi data adalah untuk memastikan input yang benar untuk aplikasi komputer.

Validasi dapat didefinisikan oleh banyak metode yang berbeda, dan disebarkan dalam berbagai cara.

Validasi sisi server dilakukan oleh web server, setelah masukan telah dikirim ke server.

Validasi sisi klien dilakukan oleh web browser, sebelum masukan dikirim ke web server.


HTML Kendala Validasi

HTML5 memperkenalkan konsep validasi HTML baru yang disebut kendala validasi.

HTML validasi kendala didasarkan pada:

  • Kendala validasi Atribut HTML Masukan
  • Kendala validasi CSS Pseudo Selectors
  • Kendala validasi DOM Properties dan Metode

Atribut Masukan kendala Validasi HTML

Atribut Deskripsi
disabled Menentukan bahwa elemen input harus dinonaktifkan
max Menentukan nilai maksimum elemen input
min Menentukan nilai minimum elemen input
pattern Menentukan pola nilai elemen input
required Menentukan bahwa kolom input membutuhkan elemen
type Menentukan jenis elemen input

Untuk daftar lengkap, buka HTML Atribut Masukan .


Kendala Validasi CSS Pseudo Selectors

Pemilih Deskripsi
:disabled Memilih elemen input dengan "cacat" atribut tertentu
:invalid Memilih elemen input dengan nilai-nilai yang tidak valid
:optional Memilih elemen masukan tanpa "dibutuhkan" atribut tertentu
:required Memilih elemen input dengan "diperlukan" atribut tertentu
:valid Memilih elemen input dengan nilai-nilai yang valid

Untuk daftar lengkap, harus CSS Pseudo Classes .