JAVASCRIPT

Contoh Program Javascript Sederhana Event Submit Part 1

 

Di artikel ini saya akan membuat sebuah program dengan javascript pada event submit. saya membuat program pada event submit ini dalam studi kasus validasi, yah kamu tahu sendiri kan validasi itu? bagi yang belum tahu, saya akan ambil studi kasus validasi itu. validasi ini ketika sebuah login tidak di isi dengan benar ataupun kosong maka akan memberikan pesan kemunculan untuk user dalam sebuah validasi ini akan memberikan segi kenyamanan dan keamanan.


Saya membuat validasi ini sangat sederhana dan agar kamu bisa tahu bagaimana gambaran validasi itu, ouh ya karena ada banyak cara bagaimana cara membuat sebuah validasi. nah untuk ini kamu buat dulu file HTML dengan nama index.html

<!doctype html>
   <html lang="en">
  <head>
    <title>Event Submit Javascript Part 1</title>
  </head>   
    
  <body>         
<!--Buat sebuah form-->
      <form action="" method="post">
<!--      Buat label agar bisa memberi judul kolom masukkan bertipe text-->
          <label for="username">Username</label>
<!--          Buat kolom masukkan bertipe text-->
         <input type="text" id="username">
<!--         Buat spasi agar kolom masukkan berikut nya ke bawah-->
          <br>
          <br>
<!--      Buat label agar bisa memberi judul kolom masukkan bertipe password-->
          <label for="password">Password</label>
 <!--          Buat kolom masukkan bertipe password-->
          <input type="password" id="password">
<!--          Buat sebuah tombol bertipe submit-->
          <button type="submit">Kirim</button>
      </form>
      
            
      <script src="script.js"></script>
  </body>
</html>

Dan kamu buat file javascript nya dengan nama script.js

//buat variabel
let form = document.getElementsByTagName('form')[0];
let username = document.getElementById('username');
let password = document.getElementById('password');

//ketika tombol kirim di klik
form.addEventListener('submit', function(e){
    //buat pengkondisian 
    //jika username nya kosong dan password nya kosong
    if(username.value==="" && password.value===""){     
        //buat sebuah peringatan
        alert('Maaf username dan password harus di isi!');
        //buat fungsi prevent default agar menolak untuk di kirim
        e.preventDefault();
    }//jika selain username nya kosong
    else if(username.value===""){
       //buat sebuah peringatan
        alert('Maaf username harus di isi!');
         //buat fungsi prevent default agar menolak untuk di kirim
        e.preventDefault();
    }//jika selain password nya kosong
    else if(password.value===""){
         //buat sebuah peringatan
        alert('Maaf password harus di isi!');
         //buat fungsi prevent default agar menolak untuk di kirim
        e.preventDefault();
    }
});

Ouh ya fungsi dalam value pada javascript ini akan mengambil nilai di dalam tag input html, nah program yang saya buat bisa kamu lihat di sini. semoga bermanfaat :D