Membuat Form Validasi dengan Javascript (Email + Verifikasi Password) | Js Tricks

Membuat Form Validasi dengan Javascript (Email + Verifikasi Password) | Js Tricks

06.08


Oke,,bertemu kembali dengan blog ZRACODER13, Kali ini admin akan bagikan tutorial membuat validasi form.

 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, Admin 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,admin menggunakan menggabungkan 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' . Karena di javascript ini mempunyai banyak event seperti OnChange,OnClick,OnKeyUp,OnKeyDown yang tentunya bisa kita manfaatkan tanpa perlu menggunakan sebuah pemicu

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

 
<!DOCTYPE html>
<html> 
<head>
<title>Tutorial Membuat Verifikasi 2 Password | ZRACODER13 </title>
<meta charset="UTF-8">
<meta name="viewports" content="width=device-width intial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css"> 
</head>

<body class="body">
 <div class="content">
  <div class="header">
   <p>FORM DAFTAR</p>
   <a href="#">ZRACODER13</a>
  </div>
   <div class="body-form">
    <form action="bla.php" method="post" name="validasi_form" onsubmit="return validasi_input(this)">
     <table>
      <tr>
       <td width="200">Username</td>
       <td><input type="text" id="username" name="username"/></td>
      </tr>
      <tr>
       <td>Email</td>
       <td><input type="text" name="email" id="email"></td>
      </tr>
      <tr>
       <td>Password</td>
       <td><input type="Password"  onchange="checkPass()" id="password_1" name="password_1"></td>
      </tr>
      <tr>
       <td>Confirm Password</td>
       <td><input type="Password"  onchange="checkPass()"  id="password_2" name="password_2">
        <span id="pesan" class="pesan-confirm"></span>
       </td>
      </tr>
     </table>
      <div class="footer-table">
       <table>
        <input type="submit" name="daftar_process" value="DAFTAR"/>
       </table>
      </div>
    </form>
   </div>
 </div>

</body>
<script type="text/javascript" src="validasi.js"></script>
</html>

Copy kode diatas dan save dengan nama index.php ,jangan lupa mengaktifkan "Apache" di software web server agan.

 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 peraturan 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?..mimin 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 .
<tr>
 <td>Password</td>
 <td><input type="Password"  onchange="checkPass()" id="password_1" name="password_1"></td>
</tr>
<tr>
 <td>Confirm Password</td>
 <td><input type="Password"  onchange="checkPass()"  id="password_2" name="password_2">
  <span id="pesan" class="pesan-confirm"></span>
 </td>
</tr>


onchange="checkpass()" berfungsi menjalankan fungsi "checkpass()" ketika form inputan baru saja diisi , dan membuat <span> untuk memberikan notifikasinya apakah password verifikasinya cocok atau tidak

 
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 peraturan inputan email

variabel minchar,memberi batasan minimal input pada kolom inputan username 8 karakter
pola_email,berfungsi memberi format inputan untuk kolom inputan email

 
if (form.username.value=="") {
  alert("Username Harus Diisi!");
  form.username.focus();
  return (false);


if diatas berfungsi "jika isi dari kolom username form validasi_input kosong,maka akan ada notifikasi berupa popup Username Harus diisi!" , untuk fungsi ini , format pengambilanya menggunakan nama <name> bukan id <id> 
     //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 dengan komentar kosong namun warna box hijau
         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 = "!"
     }
Untuk kode diatas sudah ada penjelasanya . Untuk tambahan , pengambilan data dari "validasi_input()" tepatnya "document.validasi_form.daftar_proccess.disabeld=true;" menggunakan data <name> dari inputan tipe submit ..

 Oke..segitu saja mungkin dari ZRACODER13..Jika admin ada yang salah ,admin siap dikasih kritik di kolom komentar..dan jika masih ada yang bingung,,agan-agan bisa bertanya juga
Sekian,dan Terimakasih
Semoga Bermanfaat :)
Next
« Prev Post
Previous
Next Post »
Langganan: Posting Komentar (Atom)