Tag Archive การตรวจสอบข้อมูล

Byphunsanit

เช็คฟอร์มด้วย jQuery Validation

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