ถ้าฟอร์มของเราโดนเรียกใช้บ่อย ๆ การที่ใส่กฎไว้ในไฟล์ HTML จะทำให้ทราฟฟิคเว็บเราเสียไปเปล่า ๆ แก้ได้โดยแยก rule ออกไปไว้ในไฟล์ javasscript เพราะว่าถึงหน้านี้จะโดนเรียกกี่ครั้ง แต่ไฟล์ javascript ที่โดนแยกออกไปจะโหลดแค่ครั้งเดียวเท่านั้น ประหยัดไปได้ส่วนหนึ่ง และทำให้โหลดหน้าเว็บได้เร็วขึ้น
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Validation : html5 / inline</title> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="http ://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http ://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <form action="validation.php" enctype="multipart/form-data" id="formA" method="post"> <div class="form-group"> <p>เครื่องปรุง</p> <label> <input type="checkbox" name="flavoring[]" value="1"> เกลือ</label> <label> <input type="checkbox" name="flavoring[]" value="2"> น้ำตาล</label> <label> <input type="checkbox" name="flavoring[]" value="3"> น้ำปลา</label> <label> <input type="checkbox" name="flavoring[]" value="4"> พริกป่น</label> <label for="flavoring[]" class="error"></label> </div> <div class="form-group"> <label>สั่งวันที่ <input type="text" name="dateOrder"> </label> </div> <div class="form-group"> <label>Email <input type="text" name="sendto"> </label> </div> <div class="form-group"> <label>รับเฉพาะภาพ <input type="file" name="image"> </label> </div> <div class="form-group"> <label class="btn btn-primary">รับแต่ .jpeg <input type="file" name="jpeg"> </label> </div> <div class="form-group"> <label>ข้าวเปล่า <input type="text" name="rice"> </label> </div> <div class="form-group"> <label>แคปหมู (ปลีก สั่งเป็นขีดได้ เช่น 0.5) <input type="text" name="friedPorkSkin"> </label> </div> <div class="form-group"> <label>แคปหมู (ส่ง kg.) <input type="text" name="friedPorkSkin"> </label> </div> <div class="form-group"> <p>เส้น</p> <label> <input type="radio" name="noodle" value="1"> เส้นหมี่</label> <label> <input type="radio" name="noodle" value="2"> เส้นเล็ก</label> <label> <input type="radio" name="noodle" value="3"> เส้นใหญ่</label> <label> <input type="radio" name="noodle" value="4"> เส้นหมี่</label> <label for="noodle" class="error"></label> </div> <div class="form-group"> <label>เว็บส่วนตัว <input type="url" name="blogUrl"> </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <script src="assets/jQuery/jquery.min.js"></script> <script src="plus/jQuery/jquery-validation/jquery.validate.min.js"></script> <script src="assets/script.js"></script> </body> </html>
ไฟล์ assets/script.js
$ (function () { $ ('#formA') .validate ({ "messages" : { "friedPorkSkin" : { "digits" : "ขายแต่เป็น KG ครับ" } }, "rules" : { "flavoring[]" : { "required" : true }, "dateOrder" : { "required" : true, "date" : true }, "sendto" : { "required" : true, "email" : true, "maxlength" : 50, "minlength" : 10 }, "image" : { "required" : true, "accept" : "image/*" }, "jpeg" : { "required" : true, "accept" : "image/jpeg" }, "rice" : { "required" : true, "number" : true }, "friedPorkSkin" : { "required" : true, "digits" : true }, "blogUrl" : { "required" : true, "url" : true } } }) ;
}) ;
ปล. messages โดนแยกออกมา ไม่เข้าใจเหมือนกันทำไม่ปลักอินตัวนี้ถึงออกแบบแบบนี้