Memvalidasi Input dengan JavaScript

Memvalidasi input adalah sangat penting bagi management sebuah website, karena input bagi sebuah website adalah hal yang sangat penting. Karena dari situlah informasi-informasi penting di kirimkan ke website nah pada saat proses pengisian beberapa informasi inilah yang sulit kita kontrol. Bisa saja informasi yang memang di butuhkan oleh website anda dan anda meminta pengunjung website anda untuk mengisinya ternyata tidak di isi oleh pengunjung website anda, maka apakah yang akan terjadi? proses memasukan informasi itu akan memberatkan database server anda karena data yang tidak valid tidak di masukan secara benar. Untuk menanggulasi masalah ini maka di butuhkanlah validasi input tersebut sebelum proses menyimpan data tersebut ke dalam database.

Di artikel ini, saya akan menggunakan JavaScript untuk memvalidasi input informasi dari pengunjung website. Mengapa menggunakan JavaScript? Jawabannya cukup simple, karena javascript merupakan client scripting yang berarti script tersebut berjalan di sisi client bukan di sisi server yang akan mempercepat proses validasi input. Karena itulah maka javascript bisa di jadikan alternative yang sangat baik untuk memproses bukan hanya memvalidasi input namun juga bisa melakukan lebih banyak dari itu, namun di sini saya tidak akan membahas tentang apa saja yang bisa di lakukan javascript melainkan mambuat script validasi input untuk beberapa kolom.

Untuk memproses input form ini yang pertama kita butuhkan adalah sebuah form yang akan di validasi bentuk form ini bisa bermacam-macam hal ini di karenakan setiap website memiliki kebutuhan yang berbeda-beda. Saya mencontohkan sebuah form kontak dengan beberapa kolom, berikut ini adalah formnya.

form.htm

```
<html>
```
```
<head>
```
```
<title>Kontak kami</title>
```
```
</head>
```
```
<body>
```

<form name="form" action="..." method="post" onsubmit="validasi()">

Nama:<br/><input type="text" name="name"/><br/>

Email:<br/><input type="text" name="email"/><br/>

Text:<br/><textarea name="text" cols="30" rows="5"></textarea><br/>

<input type="submit" name="submit" value="Kirim"/>

```
</form>
```
```
</body>
```
```
</html>
```

Tampilan formnya akan berbentuk seperti ini:

Berikutnya adalah membuat script untuk proses validasinya dengan javascript.

```
function validasi() {
```
```
var nama = document.form.name.value;
```
```
var email = document.form.email.value;
```
```
var text = document.form.text.value;
```
```
var valid = true;
```
```
 
```
```
if (nama == '') {
```

alert("Kolom nama tidak boleh kosong.!!!");

```
valid = false;
```
```
} else if (email == '') {
```

alert("Kolom email tidak boleh kosong.!!!");

```
valid = false;
```
```
} else if(text == '') {
```

alert("Kolom text tidak boleh kosong.!!!");

```
valid = false;
```
```
}
```
```
 
```
```
return valid;
```
```
}
```

Script ini akan kita sisipkan di dalam form kontaknya, yang berarti akan menjadi satu dengan formnya. Kita hanya mengubah sedikit isi form nya tanpa mengubah tampilannya. Ini adalah hasil akhir dari artikel ini.

form.htm

```
<html>
```
```
<head>
```
```
<title>Kontak kami</title>
```
```
<script type="text/javascript">
```
```
function validasi() {
```
```
var nama = document.form.name.value;
```
```
var email = document.form.email.value;
```
```
var text = document.form.text.value;
```
```
var valid = true;
```
```
 
```
```
if (nama == '') {
```

alert("Kolom nama tidak boleh kosong.!!!");

```
valid = false;
```
```
} else if (email == '') {
```

alert("Kolom email tidak boleh kosong.!!!");

```
valid = false;
```
```
} else if(text == '') {
```

alert("Kolom text tidak boleh kosong.!!!");

```
valid = false;
```
```
}
```
```
 
```
```
return valid;
```
```
}
```
```
</script>
```
```
</head>
```
```
<body>
```

<form action="..." method="post" onsubmit="validasi()">

Nama:<br/><input type="text" name="name"/><br/>

Email:<br/><input type="text" name="email"/><br/>

Text:<br/><textarea name="text" cols="30" rows="5"></textarea><br/>

<input type="submit" name="submit" value="Kirim"/>

```
</form>
```
```
</body>
```
```
</html>
```

Berikut ini adalah percobaan yang saya lakukan:
Percobaan pertama saya mengkosongkan kolom nama setelah tombol submit di tekan maka akan muncul alert box.

Percobaan kedua saya mengkosongkan kolom email dan mengisi kolom nama.

Percobaan ketiga saya hanya mengkosongkan kolom text.

Pecobaan terakhir saya mengisi semua kolom dan menekan tombol submit dan tidak menampilkan alert box atau peringatan apa pun.

Percobaan itu saya sertakan gambar karena ada permintaan dari pengunjung website ini minta di sertakan gambar sebagai bahan penunjang. Kata terakhir saya pada artikel ini Terima kasih sudah berkunjung dan membaca-baca artikel pada blog ini. Kritik, saran, dan komentarnya sangat saya nantikan untuk saya agar saya bisa menampilkan konten-konten yang berkualitas untuk anda….

Leave a Reply Cancel reply