Loading

27 Juli 2012

Tutorial Javascript Validasi Form (Javascript Form Validation)

Hi all!!
Udah lama nih kita gak posting2 tutorial..Nah sekarang ane mau ngepost lagi nih,skalian ngejawab pertanyaan dari vrman mengenai validasi combobox. Nah dari pada cuma sebatas combobox sekalian aja ane kasih sample validasi untuk suatu form mulai dari validasi email, password, karakter digit, check box, radio, dll..
So, langsung aja nih source code nya buat validasi form menggunakan javascript :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <meta name="description" content="Demo Contoh Script Tutorial Ajax Chat Online Support" />
 <meta name="keyword" content="tutorial ajax,script ajax,ajax,tutorial,script,contoh,php,javascript" />
 <meta name="author" content="bobybibbob - catment.blogspot.com" />
 <title>Tutorial Javascript Validasi Form (Javascript Form Validation) - catment.blogspot.com</title>
 <script type="text/javascript">
 <!--
 /*validate*/
 function isValid(form)
 {
 var valid=true;
 var message='';
 if(!form.alnum.value.match(/^[a-z]+$/i))
 {
 message='-Please insert alfanumerik with alfanumeric characters only.';
 valid=false;
 }
 if(!form.digit.value.match(/^[0-9]+$/))
 {
 message+='\n-Please insert digit with numbers only.';
 valid=false;
 }
 if(!form.username.value.match(/^[a-z0-9._]+$/i))
 {
 message+='\n-Please insert username with a-z, 0-9, _ and . charachters only.';
 valid=false;
 }
 if(!form.email.value.match(/^([a-z0-9_]+[.])*[a-z0-9_]+@([a-z0-9_-]+[.])+[a-z]+$/i))
 {
 message+='\n-Please insert email with valid email address.';
 valid=false;
 }
 if(form.pass.value=='' || form.pass.value.length<6)
 {
 message+='\n-Please insert password (Min. 6 Chars).';
 valid=false;
 }
 if(form.pass_conf.value!=form.pass.value)
 {
 message+='\n-Confirm password not equal with password.';
 valid=false;
 }
 if(form.combo.value=='')
 {
 message+='\n-Please select combo box.';
 valid=false;
 }
 var valid_check=false;
 for(i=0;i<form.check.length;i++)
 {
 if(form.check[i].checked==true)
 {valid_check=true;}
 }
 message+=((valid_check==false)?'\n-Please select check box.':'');
 var valid_radio=false;
 for(i=0;i<form.radio.length;i++)
 {
 if(form.radio[i].checked==true)
 {valid_radio=true;}
 }
 message+=((valid_radio==false)?'\n-Please select radio.':'');
 if(form.textarea.value=='')
 {
 message+='\n-Please insert textarea.';
 valid=false;
 }
 if(valid==false)
 {alert(message);}
 return valid;
 }
 /*--------*/
 //-->
 </script>
 </head>
 <body>
 <form method="post" onsubmit="return isValid(this);">
 <table>
 <tr>
 <td>Alfanumerik [A-Za-z0-9]</td>
 <td><input type="text" name="alnum" /></td>
 </tr>
 <tr>
 <td>Digit [0-9]</td>
 <td><input type="text" name="digit" /></td>
 </tr>
 <tr>
 <td>Username [A-Za-z0-9()._]</td>
 <td><input type="text" name="username" /></td>
 </tr>
 <tr>
 <td>Email</td>
 <td><input type="text" name="email" /></td>
 </tr>
 <tr>
 <td>Password (Min. 6 Chars)</td>
 <td><input type="text" name="pass" /></td>
 </tr>
 <tr>
 <td>Confirm Password</td>
 <td><input type="text" name="pass_conf" /></td>
 </tr>
 <tr>
 <td>Combo box</td>
 <td>
 <select name="combo">
 <option value="">--Select Combo Box--</option>
 <option value="1">Opt 1</option>
 <option value="2">Opt 2</option>
 </select>
 </td>
 </tr>
 <tr>
 <td>Check Box</td>
 <td>
 <input type="checkbox" name="check" value="1" /> Opt 1
 <input type="checkbox" name="check" value="2" /> Opt 2 
 </td>
 </tr>
 <tr>
 <td>Radio</td>
 <td>
 <input type="radio" name="radio" value="1" /> Opt 1
 <input type="radio" name="radio" value="2" /> Opt 2 
 </td>
 </tr>
 <tr>
 <td>Text Area</td>
 <td><textarea name="textarea"></textarea></td>
 </tr>
 </table>
 <input type="submit" value="Submit" />
 </form>
 </body>
 </html>

Untuk konsultasi, tanya-tanya tentang web programming, php, ajax, mysql, javascript, html, script bisa komen disini.
Untuk proyek atau tugas tentang web bisa komen disini.
Atau dapat langsung hubungi kami:
Email:
tawank.x@gmail.com
bobybibbob@gmail.com

YM:
tawank_x
bobybibbob

1 comments:

asda mengatakan...

di bagian check box ny error gan,
check box nya ga perlu di checklist bisa di submit..

tolong di benarkan script nya, thx..

Posting Komentar

Untuk konsultasi, tanya-tanya tentang web programming, php, ajax, mysql, javascript, html, script bisa komen disini.
Untuk proyek atau tugas tentang web bisa komen disini.
Atau dapat langsung hubungi kami:
Email:
tawank.x@gmail.com
bobybibbob@gmail.com

YM:
tawank_x
bobybibbob