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 .