ถ้าฟอร์มของเราโดนเรียกใช้บ่อยๆ การที่ใส่กฎไว้ในไฟล์ HTML จะทำให้ทราฟฟิคเว็บเราเสียไปเปล่าๆ แก้ได้โดยแยก rule ออกไปไว้ในไฟล์ javasscript เพราะว่าถึงหน้านี้จะโดนเรียกกี่ครั้ง แต่ไฟล์ javascript ที่โดนแยกออกไปจะโหลดแค่ครั้งเดียวเท่านั้น ประหยัดไปได้ส่วนหนึ่ง และทำให้โหลดหน้าเว็บได้เร็วขึ้น
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | $(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 โดนแยกออกมา ไม่เข้าใจเหมือนกันทำไม่ปลักอินตัวนี้ถึงออกแบบแบบนี้
About the author