VALIDASI FORM REGISTER DENGAN JAVASCRIPT

Pada suatu website yang mengijinkan user untuk menjadi member dari website tersebut, disediakan Form Register yang akan diisi oleh user. Dengan adanya data user pada suatu website, maka perusahaan akan mempunyai database user dan dengan mudah dapat melakukan komunikasi dengan user, baik untuk kepentingan follow up user maupun untuk maintenance member. Untuk menghindari kesalahan data yang diinput oleh user pada Form Register tersebut, maka Form Register harus divalidasi sebelum data yang diinput masuk ke database. Validasi Form Register pada kasus ini menggunakan Javascript. Selain dengan Javascript, validasi Form Register dapat juga dilakukan dengan bahasa pemrograman PHP, VB, VB.Net, Java dll. Adapun tampilan dari Form Register tersebut adalah :

 

Bahasa-bahasa pemrograman diatas dapat dipelajari di lembaga pendidikan kursus Komputer atau IT Training Center. Computer First adalah lembaga pendidikan kursus komputer yang membuka kursus bahasa-bahasa pemrograman tersebut.

Pada Form Register diatas, user harus mengisi data nama user, email, sandi, jenis kelamin dan foto dengan ketentuan sebagai berikut :
Nama :
Nama tidak boleh kosong (harus diisi) dan nama harus huruf (tidak boleh angka). Jika kosong/tidak diisi maka akan muncul notifikasi bahwa nama masih kosong. Dan jika nama diisi dengan angka maka akan muncul notifikasi bahwa nama harus huruf.
Email :
Email tidak boleh kosong, harus mengandung simbol @ dan tanda titik. Tanda titik diletakkan minimal 2 karakter setelah simbol @ dan minimal 2 karakter sebelum akhir email. Jika tidak mengandung simbol @ atau tanda titik, maka akan muncul notifkasi bahwa email tidak valid.
Sandi :
Kata Sandi harus diisi, jika kosong akan muncul notifikasi bahwa sandi masih kosong. Jumlah karakter dari kata sandi minimum 6 karakter dan maksimum 8 karakter. Jika jumlah kata sandi kurang dari 6 karakter atau lebih dari 8 karakter, maka akan muncul notifikasi bahwa kata sandi minimum 6 karakter dan maksimum 8 karakter.
Jenis Kelamin :
Jenis Kelamin diisi dengan cara memilih salah satu dari 2 pilihan yang disediakan (Laki-laki atau Perempuan).
Foto :
Foto diisi dengan mengupload foto user.

Untuk lebih jelasnya mengenai validasi Form Register dengan Javascript, penulis sudah membuat skrip/kode programnya sebagai berikut :

Nama File : register.php
Validasi Form Register JS

<html>

<head>

<title>Validasi Form Register JS</title>

<style type=”text/css”>

body {

font-family: Georgia, “Times New Roman”, Times, serif;

font-size: 12px;

}

</style>

<script type=”text/javascript”>

function valregister(){

var x=register.txtusername.value;

var x1=parseInt(x);

if(register.txtusername.value==””){

alert(“Nama masih kosong”);

register.txtusername.focus();

return false;

}

if(isNaN(x1)==false){

alert(“Nama harus huruf”);

register.txtusername.focus();

return false;

}

var x=register.txtemail.value;

if(x==””){

alert(“Alamat Email masih kosong”);

register.txtemail.focus();

return false;

}else{

var atpos=x.indexOf(“@”);

var dotpos=x.lastIndexOf(“.”);

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){

alert(“Alamat Email Tidak Valid”);

register.txtemail.focus();

return false;

}

}

var z=register.txtpassword.value;

var panjang=z.length;

if(register.txtpassword.value==””){

alert(“Sandi masih kosong”);

register.txtpassword.focus();

return false;

}

if(panjang<6 || panjang>8){

alert(“Sandi minimum 6 karakter dan maksimum 8 karakter”);

register.txtpassword.focus();

return false;

}

if ( ( register.jk[0].checked == false ) && ( register.jk[1].checked == false ) ){

alert ( “Pilih gender: Laki-laki atau Perempuan ” );

return false;

}

if(register.foto.value==””){

alert(“Foto masih kosong”);

return false;

}

return true;

}

</script>

</head>

<body>

<form name=”register” action=”” method=”post” enctype=”multipart/form-data” onSubmit=”return valregister()”>

<br />

<table align=”left” width=”364″ border=”0″>

<tr>

<td colspan=”2″ bgcolor=”#660099″>&nbsp;</td>

</tr>

<tr>

<td width=”113″>Nama</td>

<td width=”241″><label>

<input name=”txtusername” type=”text” id=”txtusername” value=”” /></label></td>

</tr>

<tr>

<td height=”32″>Email</td>

<td><input type=”text” name=”txtemail” id=”txtemail” size=”30″ maxlength=”50″></td>

</tr>

<tr>

<td height=”32″>Sandi</td>

<td><label>

<input name=”txtpassword” type=”password” id=”txtpassword”>

</label></td>

</tr>

<tr>

<td height=”40″>Jenis Kelamin</td>

<td>

<label></label>

<label></label>

<div align=”left”><input name=”jk” type=”radio” value=”Laki-laki”>

Laki-laki

<input name=”jk” type=”radio” value=”Perempuan”>

Perempuan

</label></div> </td>

</tr>

<tr>

<td>Foto</td>

<td><label>

<input name=”foto” type=”file” id=”foto” />

</label></td>

</tr>

<tr>

<td colspan=”2″><input name=”save” type=”submit” id=”save” value=”Simpan” /></td>

</tr>

<tr>

<td colspan=”2″ bgcolor=”#660099″>&nbsp;</td>

</tr>

</table>

</form>

</body>

</html>

Untuk memeriksa keandalan program, jalankan Form Register di web browser, kemudian isi nama dengan angka, maka akan tampil notifikasi, bahwa nama yang diisikan harus berupa huruf.

Demikian artikel ini penulis buat, semoga artikel ini bermanfaat untuk semua pembaca blog Computer First. Silakan dicoba ya…., jangan lupa beri komentarnya…….

 

Cara Daftar Google Adsense Indonesia Agar Cepat Diterima

Google Adsense adalah salah satu program PPC (Pay Per Click) yang paling banyak digemari oleh ...

Learn more
Share This:Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

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