Jumat, 28 September 2012

Membuat Validasi Form Dengan Javascript


Assalamualaikum,,,

Kali ini IT Sasak akan share tentang cara membuat validasi form dengan Javascript di PHP,,,

Tentunya validasi sangat dibutuhkan dalam semua jenis pemrograman,,,

Karena itu validasi saya rasa cupuk penting dan perlu untuk kita bahas.

Langsung saja kita simak langkah-langkahnya dibawah ini:

Pada kasus ini saya ambil contoh isian 3 field pada form dengan ketentuan:
1. nama: tidak boleh kosong
2. email: harus email dengan format yg valid
3. hp: harus number

Berikut script js.nya, bisa d letakkan didalam tag <head></head> pada file html nya.

    <script type="text/javascript">
String.prototype.trim = function() {a = this.replace(/^s+/,'');return a.replace(/s+$/, '');};

function ambilRVal(oRadio){
for(var i = 0; i < oRadio.length; i++){
if(oRadio[i].checked) {
return oRadio[i].value;
}
}
return null;
}
var emailvalid = /^.+@([?)[a-zA-Z0-9-_.]+.([a-zA-Z]{2,3}|[0-9]{1,3})(]?)$/;
function cekAngka(obj){
var x = obj.value;
var list = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9");
var status = true;
for (i=0; i<=x.length-1; i++){
// jika karakter ke-i termasuk dalam array, maka nilainya TRUE jika tidak, nilai FALSE
if (x[i] in list) cek = true; else cek = false;
status = status && cek;
}
return !status;
}

function validasi (){
var vnama = document.frm_reg.nama;
var vemail = document.frm_reg.email;
var vkodepos = document.frm_reg.kodepos;

//pengecekan
if(vnama.value.trim().length == 0){
alert("Nama harus diisi ");
vnama.focus();
return false;
}
else if (!emailvalid.test(vemail.value)) {
alert('Email tidak valid');
vemail.focus();
return false;
}
else if(cekAngka(vkodepos)){
alert("Kode Pos harus diisi dengan Angka");
vkodepos.focus();
return false;
}
else if(ambilRVal(document.frm_reg.elements['subscribe']) == null){
alert("Pilih Subscribe Artikel, Ya atau Tidak");
//vpendapat.focus();
return false;
}
else{
return true;
}
}
</script>




Nah ini script html yang berfungsi menampilkan formnya, tentu di letakkan di dalam tag <body></body> ya:

    <form name='frm_reg' action='action.php' method='post' onsubmit="return validasi();" enctype='multipart/form-data'>
<table align="center" border="0">
<tr><td>Nama</td><td>:</td><td><input type='text' name='nama' /></td></tr>
<tr><td>Email</td><td>:</td><td><input type='text' name='email' /></td></tr>
<tr><td>Kode Pos</td><td>:</td><td><input type='text' name='kodepos' /></td></tr>
<tr><td>Subscribe Artikel</td><td>:</td><td><label><input type='radio' name='subscribe' value='Ya' /> Ya</label><br>
<label><input type='radio' name='subscribe' value='Tidak' /> Tidak</label></td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td><input type='submit' name='submit' value='SUBMIT' /></td></tr>
</table>
</form>




Hal yang harus diperhatikan adalah :
1. atribut name=”" pada form
2. atribut onsubmit=”" pada form, yang akan memanggil fungsi validasi(); ketika form di submit
3. atribut name=”" pada elemen-elemen form (<input>,<select>)
4. Case Sensitive yha 

 Jika sobat mau scriptnya, silahkan download di link yang ada di bawah:


Selamat Mencoba..  ^_^



Source : denisetiawan.com

Tidak ada komentar:

Poskan Komentar

 

Design By:
SkinCorner