ถ้าฟอร์มของเราโดนเรียกใช้บ่อยๆ การที่ใส่กฏไว้ในไฟล์ HTML จะทำให้ทราฟฟิคเว็บเราเสียไปเปล่าๆ แก้ได้โดยแยก rule ออกไปไว้ในไฟล์ javasscript เพราะว่าถึงหน้านี้จะโดนเรียกกี่ครั้ง แต่ไฟล์ javascript ที่โดนแยกออกไปจะโหลดแค่ครั้งเดียวเท่านั้น ประหยัดไปได้ส่วนหนึ่ง และทำให้โหลดหน้าเว็บได้เร็วขึ้น
[code language=”html”]
<!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>
[/code]
ไฟล์ assets/script.js
[code language=”javascript”]
$(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
}
}
});
});
[/code]
ปล. messages โดนแยกออกมา ไม่เข้าใจเหมือนกันทำไม่ปลักอินตัวนี้ถึงออกแบบแบบนี้
About the author