Formulir JavaScript
Validasi Formulir JavaScript
Validasi form HTML dapat dilakukan dengan JavaScript.
Jika bidang formulir (nama f) kosong, fungsi ini mengingatkan pesan, dan mengembalikan false, untuk mencegah formulir dikirimkan:
Contoh JavaScript
function validateForm() {
let
x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}Fungsi dapat dipanggil ketika formulir dikirimkan:
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>
JavaScript Dapat Memvalidasi Input Numerik
JavaScript sering digunakan untuk memvalidasi input numerik:
Silakan masukkan angka antara 1 dan 10
Validasi Formulir HTML Otomatis
Validasi formulir HTML dapat dilakukan secara otomatis oleh browser:
Jika bidang formulir (fname) kosong, requiredatribut mencegah formulir ini dikirim:
Contoh Formulir HTML
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Validasi formulir HTML otomatis tidak berfungsi di Internet Explorer 9 atau yang lebih lama.
Validasi data
Validasi data adalah proses memastikan bahwa input pengguna bersih, benar, dan berguna.
Tugas validasi yang umum adalah:
- apakah pengguna telah mengisi semua bidang yang diperlukan?
- apakah pengguna memasukkan tanggal yang valid?
- sudahkah pengguna memasukkan teks dalam bidang numerik?
Paling sering, tujuan validasi data adalah untuk memastikan input pengguna yang benar.
Validasi dapat didefinisikan dengan banyak metode yang berbeda, dan digunakan dalam berbagai cara.
Validasi sisi server dilakukan oleh server web, setelah input dikirim ke server.
Validasi sisi klien dilakukan oleh browser web, sebelum input dikirim ke server web.
Validasi Batasan HTML
HTML5 memperkenalkan konsep validasi HTML baru yang disebut validasi kendala .
Validasi batasan HTML didasarkan pada:
- Validasi kendala Atribut Input HTML
- Validasi kendala CSS Pseudo Selectors
- Validasi kendala Properti dan Metode DOM
Atribut Input HTML Validasi Kendala
| Attribute | Description |
|---|---|
| disabled | Specifies that the input element should be disabled |
| max | Specifies the maximum value of an input element |
| min | Specifies the minimum value of an input element |
| pattern | Specifies the value pattern of an input element |
| required | Specifies that the input field requires an element |
| type | Specifies the type of an input element |
Untuk daftar lengkap, buka Atribut Input HTML .
Validasi Batasan CSS Pseudo Selectors
| Selector | Description |
|---|---|
| :disabled | Selects input elements with the "disabled" attribute specified |
| :invalid | Selects input elements with invalid values |
| :optional | Selects input elements with no "required" attribute specified |
| :required | Selects input elements with the "required" attribute specified |
| :valid | Selects input elements with valid values |
Untuk daftar lengkapnya, buka CSS Pseudo Classes .