Membuat form register beserta dengan validasi javascript menggunakan SweetAlert

Biongo Attacker - Selamat siang sobat Biongo.Untuk kalian yang belum melihat tutorial sebelumnya mengenai Cara mempercantik alert javascript dengan SweetAlert.Bagi kalian yang belum membaca saya sarankan untuk membacanya terlebih dahulu, dan untuk yang sudah tahu silahkan lewatkan saja.

Pertama-tama kita buat dulu form register nya, silahkan copy kode dibawah ini.

 
<link rel="stylesheet" type="text/css" href="tutorial.css">
<script type="text/javascript" src="valdasi.js"></script>
<script type="text/javascript" src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

<h1 align="center">Form Register dengan validasi javascript SweetAlert</h1>
<form action="prosesdaftar.php" method="post" class="form" onsubmit="return validasi_input(this)">
    <input type="text" name="username" class="input" placeholder="Username"><br><br>
    <input type="text" name="email" class="input" size="20" placeholder="Email"><br><br>
    <input type="password" name="password" class="input" id="pass1" placeholder="Password"><br><br>
    <input type="password" name="ulangi_password" class="input" id="pass2" onkeyup="checkPass(); return false;" placeholder="Ulangi Password"><br>
    <span id="confirmMessage" class="confirmMessage"></span><br><br>
    <input type="radio" name="kelamin" value="Laki-laki" checked="checked">Laki-Laki
    <input type="radio" name="kelamin" value="Perempuan" checked="checked">Perempuan<br><br>
    <div class="deksrip">Anda sudah membaca <a href="">syarat dan ketentuan</a> yang berlaku? Langsung klik daftar saja.</div><br>
    <input type="submit" class="submit_button" name="register_submit" value="Mendaftar">
</form>

Setelah kalian buat form registernya, maka hasilnya akan terlihat sederhana, lalu bagaimana agar terlihat menarik tampilan form register nya? caranya mudah sob, copy saja script css di bawah ini.

 
/*Membuat kata-kata pada halaman masuk*/
#katmut{
 text-align: center;
 margin: 3%;
 font-size: 15px;
}

.h1{
  color: #44bbbb;
}

/*Mempercantik form dengan css*/
.form{
 max-width: 100%;
 max-height: 2000px;
 margin-left: 15%;
}

.input{
 width: 80%;
    height: 30px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 1px;
}

.input:focus{
    box-shadow: 0 0 0 1px #63fafa;
    -webkit-transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s;
    -o-transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s;
    -moz-transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s;
}

.submit_button{
 width: 80%;
 background-color: #00abcf;
 height: 30px;
 background: #29a0e3;
    color: white;
    border:none;
    outline: none;
    -webkit-transition:background .4s linear;
    -o-transition:background .4s linear;
    -moz-transition:background .4s linear;
    transition:background .4s linear;
    cursor:pointer;
}

.submit_button:hover{
    background: #006bb6;
    -webkit-transition:background .2s linear;
    -o-transition:background .2s linear;
    -moz-transition:background .2s linear;
    transition:background .2s linear;
}

input[type="radio"]{
    width: 20px;
}


/*Membuat style untuk orang yang belum punya akun*/
a:hover{
    text-decoration: none;
}

a:focus{
    text-decoration: none;
}

#span{
    margin-left: 15%;
} 

Nah, setelah itu maka hasilnya akan seperti pada gambar di bawah ini.

Lalu sekarang kita tinggal membuat validasinya dengan javascript.Sudah saya bilang di awal, jika kalian belum membaca artikel sebelumnya tentang Cara mempercantik alert javascript dengan SweetAlert maka kalian akan kebingungan, maka dari itu saya sarankan untuk membacanya terlebih dahulu.Oke lanjut, sekarang mari copy script javascriptnya di bawah ini.

 
//Membuat validasi terhadap form login dan register

function validasi_input(form){

    if (form.username.value == ""){
    sweetAlert("Username masih kosong!");
    form.username.focus();
    return (false);
  }

  pola_username=/^[a-zA-Z0-9\_\-]{9,100}$/;
  if (!pola_username.test(form.username.value)){
      sweetAlert('Username minimal 9 karakter saja');
      form.username.focus();
      return false;
  }

  pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  if (!pola_email.test(form.email.value)){
    sweetAlert('Email yang anda tulis tidak benar atau masih kosong');
    form.email.focus();
    return false;
  }

  if (form.password.value == ""){
    sweetAlert("Password masih kosong!");
    form.password.focus();
    return (false);
  }

  if (form.ulangi_password.value == ""){
    sweetAlert("Konfirmasi Password masih kosong");
    form.ulangi_password.focus();
    return (false);
  }

return (true);
}

function checkPass(){
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('confirmMessage');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "Password cocok"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "Password tidak cocok";
    }
}

Dan silahkan anda lihat hasilnya.Oke sampai disini dulu, nanti kita akan bertemu lagi di artikel-artikel selanjutnya. #SalamBiongo