Validasi Form Registrasi dengan JavaScript

Contoh Kasus:

Saya mempunyai form registrasi seperti terlihat pada gambar dibawah ini:

Ketentuan Validasi

Saya ingin membuat validasi dari form diatas menggunakan JavaScript dengan ketentuan sebagai berikut:

  1. Jika user tidak mengisi semua data dari nama, email dan password lalu menekan tombol Kirim maka tampilkan pesan “Kamu harus mengisi semua data”
  2. Jika user tidak mengisi salah satu dari data nama atau email atau password lalu menekan tombol Kirim maka tampilkan pesan “Kamu harus mengisi semua data”
  3. Jika user sudah mengisi data nama, email dan password lalu menekan tombol Kirim maka periksa apakah data email yang telah dimasukkan itu valid atau tidak
  4. Jika user tidak memilih jenis kelamin lalu menekan tombol kirim maka tampilkan pesan “Harap pilih jenis kelaminmu”
  5. Jika user tidak memilih tanggal, bulan dan tahun lahir  lalu menekan tombol kirim maka tampilkan pesan “Harap pilih tanggal lahirmu”

Hasil yang diinginkan

Hasil yang diinginkan apabila validasinya tidak terpenuhi atau bernilai false maka akan tampil sebuah pesan dalam kotak seperti terlihat pada gambar dibawah ini:

Pembuatan Form

Buatlah satu file PHP bernama form_registrasi_tcpns.php dengan isi seperti kode dibawah ini:

<html> 

<head>

<title>Form Registrasi TCPNS</title>

<style type=”text/css”>

#addMember{

background-color:#F4F9FC;margin-right:auto;margin-left:auto;width:500px;

}

.buttonSubmit{

width:30%;padding:5px;letter-spacing:1;color:blue;

}

table.addMember{

font-family: “lucida grande”,tahoma,verdana,arial,sans-serif;

margin-top:10px;

margin-left:auto;

margin-right:auto;

font-size:12px;

}

table.addMember input[type=”text”]{

width:300px;height:30px;

}

table.addMember select{

font-family: “lucida grande”,tahoma,verdana,arial,sans-serif;

padding:2px;

height:30px;

}

div.formHeader{

font-family: “lucida grande”,tahoma,verdana,arial,sans-serif;color:#0E385F;

padding-top:5px;

border-bottom:1px dotted #BFBFBF;

}

</style>

</head>

<div id=”addMember”>

<div class=”formHeader”>

<h2><center>  <span>Form Registrasi</span> Account TCPNS </center></h2>
<p align=”center”>Silahkan isi form di bawah ini dengan baik dan benar.</p>

</div>

<form name=”add_member” method=”post” action=”#”  onSubmit=”return validasiMember()”>
<table >

<tr>

<td>Nama:</td>      <td><input type=”text” name=”nama” /></td>

</tr>

<tr>

<td>Email:</td>      <td><input type=”text” name=”email” /></td>

</tr>

<tr>

<td>Password:</td>      <td><input type=”password” name=”password” /></td>

</tr>

<tr>

<td>Jenis Kelamin:</td>

<td>

<select name=”jkel”>

<option value=””>Pilih Jenis Kelamin</option>

<option value=”l”>Laki-laki</option>

<option value=”p”>Perempuan</option>

</select>

</td>

</tr>

<tr>

<td>Tanggal Lahir:</td>

<td>

<select name=”tgl”>

<option value=””>Tgl:</option>

<?php

for($i=1;$i<32;$i++){

echo “<option value=$i>$i</option>”;

};

?>

</select>

<select name=”bulan”>

<option value=””>Bulan:</option>

<?php

$bulan=array(1=>’Januari’, ‘Februari’, ‘Maret’, ‘April’, ‘Mei’, ‘Juni’, ‘Juli’, ‘Agustus’, ‘September’, ‘Oktober’, ‘November’,’Desember’);

for($i=1;$i<13;$i++){

echo “<option value=$i>$bulan[$i]</option>”;

};

?>

</select>

<select name=”tahun”>

<option value=””>Tahun</option>

<?php

echo  $tgl_sekarang=getdate();

echo $tahun_sekarang=$tgl_sekarang[‘year’];

$awal_tahun=((int)$tahun_sekarang)-35;

$min_tahun=((int)$tahun_sekarang)-17;

for($i=$awal_tahun;$i<$min_tahun;$i++){

echo “<option value=$i>$i</option>”;

};

?>

</select>

</td>

</tr>

<tr>

<td colspan=”2″ align=”center”>

<input name=”button” type=”submit” value=”Kirim” />

</td>

</tr>

</table>

</form>

</div>

<div id=”error”></div>

</body>

</html>

Keterangan:

  • <form name=”add_member” method=”post” action=”#”  onSubmit=”return validasiMember()”>, Attribut onSubmit=”return validasiMember()” berarti jika tombol submit ditekan maka jalankan fungsi validasiMember().

Pembuatan Validasi JavaScript

<style type=”text/css”> 

div#error{

text-align:center;

}
</style>

<script type=”text/javascript”>

function validasiMember(){

var form_add=document.add_member;

var txtnama=form_add.nama.value;

var txtemail=form_add.email.value;

var txtpassword=form_add.password.value;

var jkel=form_add.jkel.selectedIndex;

var tgl=form_add.tgl.selectedIndex;

var bulan=form_add.bulan.selectedIndex;

var tahun=form_add.tahun.selectedIndex; var ada=”0″; var logika=””;

for(var i=0;i<7;i++){

if(document.add_member.elements[i].value!=””){

var ada=”1″;

}

}

var div_error=document.getElementById(‘error’);

if(ada==0){

div_error.innerHTML=”Kamu harus mengisi semua field”;
logika=false; }else if(txtnama==”” || txtemail==”” || txtpassword==””){
div_error.innerHTML=”Kamu harus mengisi semua field”;
logika=false;

}else if(txtnama.length>0 && txtemail.length>0 && txtpassword.length>0){

var hasil_periksa=periksaEmail();

if(hasil_periksa==1){

if(jkel==0){

div_error.innerHTML=”Harap pilih jenis kelaminmu”;
logika=false;

}else if(tgl==0  || bulan==0 || tahun==0){

div_error.innerHTML=”Harap Lengkapi Tanggal Lahirmu”;
logika=false;

}else{

logika=true;

}

}

}

return logika;

}

 

function periksaEmail(){

var form_add=document.add_member;
var txtemail=form_add.email.value;
var div_error=document.getElementById(‘error’);

var posisiAt=txtemail.indexOf(“@”);
var posisiTitik=txtemail.lastIndexOf(“.”);

if (posisiAt<1 || posisiTitik<posisiAt+2 || posisiTitik+2>=txtemail.length)  {

div_error.innerHTML=”Harap masukkan alamat Email yang valid”;
return 0;

}else{

return 1

}

}
</script>

Keterangan:

  • document.add_member; Kode ini digunakan untuk mengambil form yang mempunyai nama “add_member” yaitu <form name=”add_member”>
  • form_add.nama.value; Kode ini digunakan untuk mengambil nilai dari elemen form yang mempunyai nama “nama” yaitu <input name=”nama”>
  • form_add.email.value; Kode ini digunakan untuk mengambil nilai dari elemen form yang mempunyai nama “email” yaitu <input name=”email”>
  • form_add.password.value; Kode ini digunakan untuk mengambil nilai dari elemen form yang mempunyai nama “password” yaitu <input name=”password”>
  • form_add.jkel.selectedIndex; Kode ini digunakan untuk mengambil index dari <option value> dari elemen <select> form yang mempunyai nama “jkel” yaitu <select name=”jkel”>
  • form_add.tgl.selectedIndex; Kode ini digunakan untuk mengambil index dari <option value> dari elemen <select> form yang mempunyai nama “tgl” yaitu <select name=”tgl”>
  • form_add.bulan.selectedIndex; Kode ini digunakan untuk mengambil index dari <option value> dari elemen <select> form yang mempunyai nama “bulan” yaitu <select name=”bulan”>
  • form_add.tahun.selectedIndex; Kode ini digunakan untuk mengambil index dari <option value> dari elemen <select> form yang mempunyai nama “tahun” yaitu <select name=”tahun”>

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *