Validasi formulir adalah proses memeriksa apakah input yang dimasukkan oleh pengguna sesuai dengan persyaratan yang ditentukan sebelum data dikirimkan ke server. Ini membantu mengurangi kesalahan dan memastikan bahwa data yang diterima oleh aplikasi adalah valid. Berikut adalah contoh validasi formulir menggunakan JavaScript:
### 1. Membuat Formulir HTML:
Mulailah dengan membuat formulir HTML dengan elemen input yang diperlukan.
```html
<form id="formulir">
<input type="text" id="nama" placeholder="Nama">
<input type="email" id="email" placeholder="Email">
<button type="submit">Kirim</button>
</form>
```
### 2. Validasi menggunakan JavaScript:
Tambahkan script JavaScript di bawah formulir untuk melakukan validasi saat pengguna mencoba mengirimkan formulir.
```html
<script>
document.getElementById("formulir").addEventListener("submit", function(event) {
var nama = document.getElementById("nama").value;
var email = document.getElementById("email").value;
if (nama === "" || email === "") {
alert("Harap lengkapi semua kolom!");
event.preventDefault(); // Mencegah pengiriman formulir jika tidak valid
} else if (!validateEmail(email)) {
alert("Harap masukkan alamat email yang valid!");
event.preventDefault();
}
});
function validateEmail(email) {
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
</script>
```
Dalam script di atas, kita menambahkan event listener ke formulir yang akan dipanggil saat formulir disubmit. Di dalam event listener, kita mengambil nilai dari kolom nama dan email. Kemudian, kita memeriksa apakah kedua kolom tersebut telah diisi. Jika tidak, kita tampilkan pesan kesalahan dan mencegah pengiriman formulir dengan menggunakan `event.preventDefault()`. Selanjutnya, kita memeriksa apakah alamat email yang dimasukkan adalah format yang valid menggunakan ekspresi reguler.
Dengan melakukan validasi formulir menggunakan JavaScript seperti ini, Anda dapat memastikan bahwa data yang dikirimkan oleh pengguna telah divalidasi dan sesuai dengan persyaratan yang ditentukan.
No comments:
Post a Comment