ถ้าฟอร์มของเราโดนเรียกใช้บ่อยๆ การที่ใส่กฎไว้ในไฟล์ 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 โดนแยกออกมา ไม่เข้าใจเหมือนกันทำไม่ปลักอินตัวนี้ถึงออกแบบแบบนี้