Tutorial Cara Membuat Validasi Dengan JavaScript
Pada artikel sebelumnya saya membuat Validasi dengan HTML, artikel selanjutnya saja akan membuat tentang Tutorial Cara Membuat Validasi Dengan JavaScript. tentu saja HTML dan Javascript berbeda. Fungsi nya tetap sama yaitu jika form belum diisi maka sistem tidak akan memproses form tersebut.
Tanpa panjang lebar lagi langsung saja kita coba buat berikut ini.
Tutorial Cara Membuat Validasi Dengan Javascript
1. Buatl file dengan nama validasi.html
Pertama, silahkan buat file dengan nama validasi.html di text editor anda, lalu ketikan kode berikut :
2. Simpan
Kedua, simpan file validasi.html kemudian jalankan di browser anda. Maka tampilannya akan seperti ini.
Penjelasan :
Pada kode input di atas saya menggunakan id untuk dipanggil oleh Javascript lalu digunakan untuk membuat validasi.
Untuk memanggil fungsi validasi javascript saya menggunakan element Onclick="return validasi"(); yang digunakan untuk memanggil validasinya melalui javascript. Coba lihat pada script function validasi, function itulah yang memanggil javascript untuk membuat validasi.
Lalu saya membuat kode javascript nya seperti ini.
Logika dari script di atas yaitu :
Jika kolom nama value (nilai) nya 0 (kosong) maka tampil alert "Harap Masukan Nama". fungsi else tersebut adalah jika kolom nama diisi maka tampilkan alert "Nama Berhasil Dimasukan". Logika nya sangat simpel sekali.
Itu saja untuk tutorial singkat tersebut sangat mudah untuk membuat validasi dengan javascript terlebih lagi dengan javascript, validasi tersebut bisa diedit semenarik mungkin. Semoga bermanfaat untuk anda, Sekian terima kasih.
Pertama, silahkan buat file dengan nama validasi.html di text editor anda, lalu ketikan kode berikut :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Validasi Dengan Javascript</title>
</head>
<body>
<form method="POST" action="#">
<label>Nama</label>
<input type="text" name="nama" id="name">
<button type="submit" onclick="return validasi();">Simpan</button>
</form>
<script type="text/javascript">
function validasi(){
var name = document.getElementById("name");
if (name.value.length == 0) {
alert("Harap Masukan Nama");
}else{
alert("Nama Berhasil Dimasukan");
}
}
</script>
</body>
</html>
2. Simpan
Kedua, simpan file validasi.html kemudian jalankan di browser anda. Maka tampilannya akan seperti ini.
 |
| Kolom nama belum diinput |
 |
| Kolom nama sudah diinput |
<label>Nama</label>
<input type="text" name="nama" id="name">
Pada kode input di atas saya menggunakan id untuk dipanggil oleh Javascript lalu digunakan untuk membuat validasi.
Untuk memanggil fungsi validasi javascript saya menggunakan element Onclick="return validasi"(); yang digunakan untuk memanggil validasinya melalui javascript. Coba lihat pada script function validasi, function itulah yang memanggil javascript untuk membuat validasi.
Lalu saya membuat kode javascript nya seperti ini.
<script type="text/javascript">
function validasi(){
var name = document.getElementById("name");
if (name.value.length == 0) {
alert("Harap Masukan Nama");
}else{
alert("Nama Berhasil Dimasukan");
}
}
</script>Logika dari script di atas yaitu :
Jika kolom nama value (nilai) nya 0 (kosong) maka tampil alert "Harap Masukan Nama". fungsi else tersebut adalah jika kolom nama diisi maka tampilkan alert "Nama Berhasil Dimasukan". Logika nya sangat simpel sekali.
Itu saja untuk tutorial singkat tersebut sangat mudah untuk membuat validasi dengan javascript terlebih lagi dengan javascript, validasi tersebut bisa diedit semenarik mungkin. Semoga bermanfaat untuk anda, Sekian terima kasih.
