 |
| Membuat Validasi Form HTML5 Dengan JavaScript |
Validasi Form dengan JavaScript
Validasi form html5 bisa dilakukan dengan JavaScript. Kolaborasi keduanya dapat menghasilkan form yang lebih interaktif, dimana fieldName (bidang) kosong akan menampilkan pesan peringatan bilamana fieldName (bidang) itu kosong atau berisi karakter yang tidak sesuai, sehingga dapat mencegah segala bentuk kesalahan pada form sebelum diajukan (submit).
Source code:
<!DOCTYPE html>
<html>
<!-- gatewan.com -->
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Nama Wajib Diisi !");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp"
onsubmit="return validateForm()" method="post">
Nama : <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Demo:
Validasi Form dengan HTML5
Validasi form dalam bentuk HTML dapat dilakkukan secara otomatis oleh browser. Jadi, jika fieldName (bidang) masih kosong dan Anda menekan tombol submit, maka PopUp peringatan akan muncul untuk mencegah terjadinya kesalahan atau kelalaian.
Source code:
<!DOCTYPE html>
<html>
<body>
<!-- gatewan.com -->
<form action="demo_form.asp" method="post">
Nama : <input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>Jika Anda klik submit, tanpa mengisi kolom teks,
browser Anda akan menampilkan pesan kesalahan.</p>
</body>
</html>
Demo:
Validasi Data
Validasi data adalah proses memastikan bahwa input pada computer itu bersih, benar dan berguna.Cirikhas tugas validasi adalah:
- Pengguna telah mengisi semua bidang yang diperlukan
- Pengguna telah memasukan tanggal yang valid
- Mencegah pengguna memasukan text dalam bidang numeric
- Paling sering, tujuan validasi data adalah untuk memastikan input yang benar sesuai kriteria yang telah ditentukan.
Validasi pada server dilakukan oleh server web, setelah input dikirim ke server.
Validasi pada klien dilakukan oleh Browser, sebelum input dikirim ke server.
HTML Constraint Validation
HTML5 memperkenalkan konsep validasi HTML baru yang disebut constraint validation. HTML constraint validation didasarkan pada:
- Constraint validation HTML Input Attributes
- Constraint validation CSS Pseudo Selectors
- Constraint validation DOM Properties and Methods
Constraint Validation HTML Input Attributes
Attribute | Description |
disabled | Menentukan bahwa elemen input harus dinonaktifkan |
max | Menentukan nilai maksimum dari sebuah elemen input |
min | Menentukan nilai minimum dari elemen input |
pattern | Menentukan pola nilai suatu elemen input |
required | Mewajibkan pada kolom elemen input |
type | Menentukan jenis elemen input |
Constraint Validation CSS Pseudo Selectors
Selector | Description |
:disabled | Memilih elemen input dengan spesifikasi atribut "disabled" |
:invalid | Memilih elemen input dengan spesifikasi atribut invalid values |
:optional | Memilih elemen input dengan spesifikasi atribut no "required" attribute specified |
:required | Memilih elemen input dengan spesifikasi atribut "required" attribute specified |
:valid | Memilih elemen input dengan spesifikasi atribut valid values |
Constraint Validation DOM Methods
Property | Description |
checkValidity() | Mengembalikan nilai “true” jika sebuah input element berisi data valid. |
setCustomValidity() | Sets merupakan properti validationMessage input element. |
Pada contoh diatas bebas gan, yang jelas gak boleh null / empty / kosong / spasi/ " "
BalasHapus