JAVASCRIPT

Contoh Program Javascript Sederhana Event Submit Part 2

 


Pada artikel ini saya akan membuat program javascript sederhana yaitu event submit part 2 dan saya telah membuat part 1 kamu bisa cek di sini program yang saya buat pada event submit ini mengambil studi kasus validasi lagi. Studi kasus validasi tersebut yaitu validasi panjang kalimat jika panjang kalimat lebih besar dari 6 maka munculkan pesan, program saya ini bertujuan hanya untuk pembelajaran saja.


Nah jika mau lebih jelas kamu buat file index.html

<!doctype html>
   <html>
  <head>
    <title>Contoh Program Javascript Sederhana Event Submit Part 2</title>
  </head>   
    
  <body>         
<!--Buat form-->
      <form method="post" action="">
<!--      Buat inputan ber tipe text-->
          <input type="text" autocomplete="off" placeholder="username">
<!--          Buat tombol-->
          <button type="submit">Kirim!</button>
      </form>
      
    <script src="script.js"></script>  
  </body>
</html>

Jika sudah kamu buat file javascript nya dengan nama script.js

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

//ketika tombol kirim di tekan
form.addEventListener('submit', function(e){
    //apapun yang di ketikan oleh user
    if(input.value){
        //buat variabel untuk membuat panjangKalimat
        let panjangKalimat = input.value;
        //jika panjangKalimat lebih besar dari 6
        if(panjangKalimat.length > 6){
            //tampikan pesan
            alert('Maaf username jangan terlalu panjang!');
            //tolak untuk kirim
            e.preventDefault();
            //selain program bernilai benar
        }else{
            //tampilkan pesan kebenaran
        alert('Anda berhasil masuk ke website game!');
    }
  }
});

Nah program di atas bisa kunjungi di sini. Semoga bermanfaat :D