Cara membuat validasi form dengan javascript

Tentunya sebuah form harus dilengkapi validasi agar tidak ada terjadinya pengiriman kosong,format yang tidak benar. inputan jadi semprawuttt dah pokoknya..
Nah, Biar teratur format inputanya, gue akan kasih nih, tutorial validasi untuk Inputan yang kosong,format email dan sekaligus 2 verifikasi password yang biasanya digunakan dalam form pendaftaran.

Di dalam tutorial ini,gue menggunakan javascript,css dan html tentunya.
Kok ngga pake PHP aja ?? Kalo pake php kita harus menggunakan sebuah pemicu (button misalnya) agar script validasinya bekerja dengan menggunakan ‘refresh’ .hal ini akan membuat data di hilang ketika kita kasih fungsi redirect di script php. Karena di javascript ini mempunyai banyak event seperti OnChange,OnClick,OnKeyUp,OnKeyDown yang tentunya bisa kita manfaatkan tanpa perlu menggunakan sebuah pemicu dan menghemat lalu lintas server ketika menggunakan php

Ditutorial ini jangan takut pusing karena bakal gue jelasin.

Langsung saja ini adalah script htmlnya, copas ke text editor agan agan jangan lupa Save smua file dalam satu folder yang sama

 




 

 

  

   
FORM DAFTAR

   ZRACODER13
  

   

    

     
















      
       
Username
       
      
      
       
Email
       
      
      
       
Password
       
      
      
       
Confirm Password
       

        
       
      
     

      

       


      

    

   

 

Copy kode diatas dan save dengan nama index.php ,jangan lupa mengaktifkan “Apache”,karena disini saya meletakan di htdocs di software web server agan / tidak juga gapapa sih.

untuk script css

body {
 background-color: #f5f5f5;
 font-family: sans-serif;
}
.body {
 width: 70%;
 margin: 0 auto;
 padding: 0px;
 }
.content {
  margin: 222px auto ;
 width:50%;
 height: 25%;
 background-color: #666;
 border-radius: 10px;
}
.header {
  padding: 0px;
 width: 100%;
 border-radius: 10px 10px 0px 0px;
 background-color:#E98758;
}
.header p {
 padding: 0px 20px;
 font-weight: bold;
 display: inline-block;
 color:#272822;
}
.header a {
 margin-left: 200px;
 text-decoration: none;
 font-size: 12px;
 color: #666;
}
.header a:hover {
 color: #000;
 transition: 1s;
 font-weight: bold;
}
table {
 padding: 5px 10px;
 color: #f5f5f5;
}
input {
 border-radius: 5px;
 height: 25px;
 width: 200px;
}
input:focus {
 height: 30px
 width:210px;
}
.pesan-confirm {
}
.footer-table {
 background-color: silver;
 border-radius: 0px 0px 5px 5px;
 display: inline-block;
 width: 100%;
 height: 40px;
}
.footer-table input {
  margin: 0 auto;
 height: 40px; 
 width: 100%;
 border-radius: 0 0 5px 5px;
 border:none;
 font-family: Arial;
 background-color: #E98758;
 color: #272822;
 font-weight: bold;
}
.footer-table input:hover {
 background-color: #666;
 color: #E98758;
 transition: 1s;
 border:none;
}

Save dengan nama file “style.css

Untuk script javascriptnya

//validasi inputan form ketika kosong atau belum memenuhi suatu peraturan tertentu function validasi_input(form){
  var minchar = 8; //membuat minimal char dari inputan username
  pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/; //membuat pattern inputan email
      //validasi dimulai
    if (form.username.value=="") {
     alert("Username Harus Diisi!");
     form.username.focus();
     return (false);
    } else if (form.username.value.length <= minchar) {
     alert("Username Harus Lebih dari 8 Karakter!");
     form.username.focus();
     return (false);
    }else if (form.email.value=="") {
     alert("Email Harus Diisi!");
     form.username.focus();
     return (false);
   } else if (!pola_email.test(form.email.value)){
   alert ('Penulisan Email tidak benar');
   form.email.focus();
   return (false);
   } else if (form.password_1.value==""){
    alert("Password Tidak Boleh kosong!");
    form.password.focus();
    return (false);
   } else if (form.password_2.value==""){
    alert("Password Tidak Boleh kosong!");
    form.password_ulangi.focus();
    return (false);
   } else {
     return (true);
  }
}
  //membuat validasi password 1 dan password 2 (pencocokan)
 function checkPass() {
    //mengambil object dan dimasukan ke variabel 
    var pass_1 = document.getElementById('password_1');
    var pass_2 = document.getElementById('password_2');
    //mengambil object dan dimasukan ke variabel 
    var message = document.getElementById('pesan');
    //inisialisasi warna didalam variabel
    var warnabenar = "#66cc66";
    var warnasalah = "#ff6666";
    //membandingkan 2 variabel
    if(pass_1.value == pass_2.value){
        //ketika password benar 
        //ubah menjadi warna jelek
        //memeberi peringatanya bahwa benar
        document.validasi_form.daftar_process.disabled=false;
        pass_2.style.backgroundColor = warnabenar;
        message.style.color = warnabenar;
        message.innerHTML = ""
    }else{
        //ini ketika password tidak cocok
        //ubah menjadi warna jelek
        //memeberi peringatanya bahwa salah dengan tanda seru
        document.validasi_form.daftar_process.disabled = true;
        alert("Password tidak Cocok!");
        pass_2.style.backgroundColor = warnasalah;
        message.style.color = warnasalah;
        message.innerHTML = "!"
    }
}

Save dengan nama file “validasi.js”

Masih bingung?..gue kasih penjelasanya

<form action="bla.php" method="post" name="validasi_form" onsubmit="return validasi_input(this)">

Kita membuat struktur form dengan method=”post”, berfungsi agar data yang kita inputkan akan dikirimkan ke file tujuan (action) , dan onsubmit=”return validasi_input(this)”, berfungsi membuat perintah ketika tipe submit di bagian form kita telah klik / diakses .