<script language="javascript"> function check(){ var emailFilter=/^([a-zA-Z0-9\_\-\.]{3,})+@([a-zA-Z0-9\-]{3,})+.+([a-zA-Z]{2,}|.+([a-zA-Z]{2,}))$/; var str=document.form2.textfield10.value; if(document.form2.textfield2.value==""){ alert('กรุณากรอกชื่อ USER'); document.form2.textfield2.focus(); return false; }else if(document.form2.textfield3.value==""){ alert('กรุณากรอก PASSWORD'); document.form2.textfield3.focus(); return false; }else if(document.form2.textfield3.value != document.form2.textfield4.value){ alert('คุณใส่ password ไม่ตรงกัน'); document.form2.textfield4.focus(); return false; }else if(document.form2.textfield5.value==""){ alert('กรุณากรอกชื่อ'); document.form2.textfield5.focus(); return false; }else if(document.form2.textfield6.value==""){ alert('กรุณากรอกนามสกุล'); document.form2.textfield6.focus(); return false; }else if(document.form2.textfield10.value==""){ alert('กรุณากรอก EMAIL'); document.form2.textfield10.focus(); return false; }else if (!(emailFilter.test(str))) { alert ("ท่านใส่อีเมล์ไม่ถูกต้อง"); return false; }else if(document.form2.textfield11.value.length<10){ alert('กรุณากรอกเบอร์โทรศัพท์ให้ครบ 10 หลัก'); document.form2.textfield11.select(); return false; }else if(document.form2.location.value==""){ alert('กรุณาใส่ชื่อจังหวัด'); document.form2.location.focus(); return false; } return true; } function chknum(){ key=event.keyCode; if(key<48 || key>57){ event.returnValue=false; } } </script> Code HTML <form id="form2" name="form2" method="post" action="insertmem.php" onsubmit="return check()"> <table width="100%" height="544" border="0"> <tr> <td height="47" colspan="4"><div align="center" class="style1 style2">สมัครสมาชิก</div></td> </tr> <tr> <td width="21%" height="43"> </td> <td width="22%" bgcolor="#FF3399">ID</td> <td width="40%" bgcolor="#FF3399"> <label> <input type="text" name="textfield2" id="textfield2" /> </label> </td> <td width="17%"> </td> </tr> <tr> <td height="47"> </td> <td bgcolor="#FF3399">Password</td> <td bgcolor="#FF3399"> <label> <input type="password" name="textfield3" id="textfield3" /> </label> </td> <td> </td> </tr> <tr> <td height="45"> </td> <td bgcolor="#FF3399">Conform Password</td> <td bgcolor="#FF3399"> <label> <input type="password" name="textfield4" id="textfield4" /> </label> </td> <td> </td> </tr> <tr> <td height="45"> </td> <td bgcolor="#FF3399">ชื่อ</td> <td bgcolor="#FF3399"> <label> <input type="text" name="textfield5" id="textfield5" /> </label> </td> <td> </td> </tr> <tr> <td height="46"> </td> <td bgcolor="#FF3399">นามสกุล</td> <td bgcolor="#FF3399"> <label> <input type="text" name="textfield6" id="textfield6" /> </label> </td> <td> </td> </tr> <tr> <td height="46"> </td> <td bgcolor="#FF3399">E-mail</td> <td bgcolor="#FF3399"> <label> <input type="text" name="textfield10" id="textfield10" /> </label> </td> <td> </td> </tr> <tr> <td height="45"> </td> <td bgcolor="#FF3399">เบอร์</td> <td bgcolor="#FF3399"> <label> <input name="textfield11" type="text" id="textfield11" onkeypress="chknum()" maxlength="10" /> </label> </td> <td> </td> </tr> <tr> <td height="42"> </td> <td bgcolor="#FF3399">จังหวัด</td> <td bgcolor="#FF3399"> <label> <select name="location" id="location"> <option value="" selected="selected">-เลือกจังหวัด-</option> <option value="0">กรุงเทพมหานคร</option> <option value="1">กระบี่</option> <option value="2">กาญจนบุรี</option> <option value="3">กาฬสินธุ์</option> <option value="4">กำแพงเพชร</option> <option value="5">ขอนแก่น</option> <option value="6">จันทบุรี</option> <option value="7">ฉะเชิงเทรา</option> <option value="8">ชลบุรี</option> <option value="9">ชัยนาท</option> <option value="10">ชัยภูมิ</option> <option value="11">ชุมพร</option> <option value="12">เชียงราย</option> <option value="13">เชียงใหม่</option> <option value="14">ตรัง</option> <option value="15">ตราด</option> <option value="16">ตาก</option> <option value="17">นครนายก</option> <option value="18">นครปฐม</option> <option value="19">นครพนม</option> <option value="20">นครราชสีมา</option> <option value="21">นครศรีธรรมราช</option> <option value="22">นครสวรรค์</option> <option value="23">นนทบุรี</option> <option value="24">นราธิวาส</option> <option value="25">น่าน</option> <option value="26">บุรีรัมย์</option> <option value="76">บึงกาฬ</option> <option value="27">ปทุมธานี</option> <option value="28">ประจวบคีรีขันธ์</option> <option value="29">ปราจีนบุรี</option> <option value="30">ปัตตานี</option> <option value="31">พระนครศรีอยุธยา</option> <option value="32">พะเยา</option> <option value="33">พังงา</option> <option value="34">พัทลุง</option> <option value="35">พิจิตร</option> <option value="36">พิษณุโลก</option> <option value="37">เพชรบุรี</option> <option value="38">เพชรบูรณ์</option> <option value="39">แพร่</option> <option value="40">ภูเก็ต</option> <option value="41">มหาสารคาม</option> <option value="42">มุกดาหาร</option> <option value="43">แม่ฮ่องสอน</option> <option value="44">ยโสธร</option> <option value="45">ยะลา</option> <option value="46">ร้อยเอ็ด</option> <option value="47">ระนอง</option> <option value="48">ระยอง</option> <option value="49">ราชบุรี</option> <option value="50">ลพบุรี</option> <option value="51">ลำปาง</option> <option value="52">ลำพูน</option> <option value="53">เลย</option> <option value="54">ศรีสะเกษ</option> <option value="55">สกลนคร</option> <option value="56">สงขลา</option> <option value="57">สตูล</option> <option value="58">สมุทรปราการ</option> <option value="59">สมุทรสงคราม</option> <option value="60">สมุทรสาคร</option> <option value="61">สระแก้ว</option> <option value="62">สระบุรี</option> <option value="63">สิงห์บุรี</option> <option value="64">สุโขทัย</option> <option value="65">สุพรรณบุรี</option> <option value="66">สุราษฎร์ธานี</option> <option value="67">สุรินทร์</option> <option value="68">หนองคาย</option> <option value="69">หนองบัวลำภู</option> <option value="70">อ่างทอง</option> <option value="71">อำนาจเจริญ</option> <option value="72">อุดรธานี</option> <option value="73">อุตรดิตถ์</option> <option value="74">อุทัยธานี</option> <option value="75">อุบลราชธานี</option> </select> </label> </td> <td> </td> </tr> <tr> <td height="68" colspan="4"> <label> <div align="center"> <input type="submit" name="button3" id="button3" value="ตกลง" /> <input type="reset" name="button2" id="button2" value="ยกเลิก" /> </div> </label> </tr> </table> </form>
Quote:ผมหาตัวอย่าง jquery validation มาให้ครับ ลองทดสอบดูหน่อยน่ะครับ เห็นว่าง่ายดี
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> <style type="text/css"> * { font-family: Verdana; font-size: 96%; } label { width: 10em; float: left; } label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; } </style> <script> $(document).ready(function(){ $("#commentForm").validate(); }); </script> </head> <body> <form class="cmxform" id="commentForm" method="get" action="next_step.php"> <fieldset> <legend>A simple comment form with submit validation and default messages</legend> <p> <label for="cname">Name</label> <em>*</em><input id="cname" name="name[]" size="25" class="required" minlength="2" /> </p> <p> <label for="cname">Surname</label> <em>*</em><input id="cname" name="name[]" size="25" class="required" minlength="4" /> </p> <p> <label for="cemail">E-Mail</label> <em>*</em><input id="cemail" name="email" size="25" class="required email" /> </p> <p> <label for="curl">URL</label> <em> </em><input id="curl" name="url" size="25" class="url" value="" /> </p> <p> <label for="ccomment">Your comment</label> <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form> </body></html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง