Tutorial Cara Membuat Validasi Dengan JavaScript

2 komentar

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 :

<!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
Penjelasan :


<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.
Fiqi Sulaiman
Hello, saya Fiqisulaiman. seorang Web Developer yang mengkhususkan diri ke bagian Front End Development selain itu saya suka membuat beragam macam template website di waktu luang saya.

Related Posts

2 komentar

  1. halo kak.. thanks kak atas artikelnya sudah membantu dalam perkuliahan saya kali ini.. saya mau tanya kak, bisakah validasi dilakukan pada semua hal yang diinput? smoga kakak dapat terus berkarya dlm membuat artikel” pada website ini, sukses slalu kak.. perkenalkan nama saya meren laurensia, mahasiswi dari STMK Atma Luhur Pangkalpinang.. ini website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  2. akhirnya saya mengerti bahaimana cara membuat validasi form dengan javascript ,
    artikelnya bermanfaat sekali mudah untuk saya pahami kata"nya jelas dan saya sangat mudah memahaminya terimakasih ya min sudah membuat artikel sekeren ini dan terus berkarya ya min
    perkenalkan nama saya indah lestari
    website kampus saya
    https://www.atmaluhur.ac.id

    BalasHapus

Posting Komentar