jQuery Validators Form เทคนิคการใช้ jQuery เพื่อตรวจสอบค่าว่าง หรือ ความถูกต้องข้อมูลใน Form ด้วย jQuery Validators

Query Validators Form การใช้ jQuery เพื่อตรวจสอบค่าว่าง หรือ ความถูกต้องข้อมูลใน Form ด้วย jQuery jQuery Validators เทคนิคการตรวจสอบค่าว่างและความถูกต้องของ Form ทีได้กรอกข้อมูลลงไปบนฟอร์ม ด้วย jQuery Validators การใช้งานง่ายมาก สามารถตวจสอบข้อมูลได้หลายอย่าง เช่น ค่าว่าง , อีเมล์ m หมายเลขโทรศัพท์ , การยืนยันรหัสผ่าน และอื่น ๆ อีกได้หลากหลาย  การใช้งาน บทความ jQuery Validators ในการใช้งาน jQuery Validators Form จะเรียกใช้ไฟล์ดังนี้ - validationEngine.jquery.css - template.css - jquery-1.6.min.js - jquery.validationEngine-en.js - jquery.validationEngine.js ให้ดาวน์โหลดไฟล์และ Inlcude ตามโครงสร้างของไฟล์  1.<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/> 2.<link rel="stylesheet" href="css/template.css" type="text/css"/> 3.<script src="js/jquery-1.6.min.js" type="text/javascript">    </script> 4.<script src="js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script> 5.<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"> การเริ่มการตรวจสอบ  01.<script> 02.jQuery(document).ready(function(){ 03.// binds form submission and fields to the validation engine 04.jQuery("#formID").validationEngine(); 05.}); 06.  07.</script> 08.  09.<form id="formID" class="formular" method="post"> 10.<fieldset> 11.<legend> 12.Required! 13.</legend> 14.<label> 15.<span>Field is required : </span> 16.<input value="" class="validate[required] text-input" type="text" name="req"id="req" /> 17.</label> 18.<label> 19.<span>Favorite sport 1:</span> 20.<select name="sport" id="sport" class="validate[required]"> 21.<option value="">Choose a sport</option> 22.<option value="option1">Tennis</option> 23.<option value="option2">Football</option> 24.<option value="option3">Golf</option> 25.</select> 26.</label> 27.<label> 28.<span>Favorite sport 2:</span> 29.<select name="sport2" id="sport2" multiple class="validate[required]"> 30.<option value="">Choose a sport</option> 31.<option value="option1">Tennis</option> 32.<option value="option2">Football</option> 33.<option value="option3">Golf</option> 34.</select> 35.</label> 36.<br/> 37.validate[required] 38.</fieldset> 39.</form> จะเห็นว่า element แค่ล่ะตัวจะถูกกำหนด filter ด้วย class="validate[required] text-input" หรืออื่น ๆ ขึ้นอยู่กับเงื่อนไขที่กำหนด Screenshot