jQuery Validation ครบทุกเม็ดในการ validate
ใจจริงนั้น วันนี้ขี้เกียจอัพเดทมากๆ แต่นี่ก็ใกล้จะหมดเดือน เมษาแล้ว และถ้าอัพบทความนี้สำเร็จ ก็จะกลายเป็นเดือน ที่มีบทความอัพเดทมากที่สุด นั่นก็คือ “11 บทความ” เรียกว่าเป็นการทำลายสถิติ ตัวเอง นั่นเอง 555+
นานมาแล้วครั้งนึงผมเคยแนะนำ plugin ของ jQuery ที่ชื่อว่า Really Simple Validation ซึ่งก็เอาไว้ใช้ทำงาน validate ข้อมูลจาก Form เป็นตัวที่ค่อนข้างจะใช้งานง่ายมากเลยทีเดียว
แต่ในชีวิตจริงผมไม่ค่อยจะใช้ตัวนั้นหรอกครับ ตัวที่ผมใช้มันคือ ตัวนี้ครับ แต่ด้วยความที่มัน ฉลาดและมากความสามารถ แน่นอน มันต้องทำให้ผมเหนื่อยในการที่จะ่ายทอดออกมาแน่ๆ เลยเพิ่งจะมาขยันเอาตอนนี้แหละครับ
สำหรับ validation plugin ตัวนี้นั้น สามารถที่จะ ตรวจเช็ค ข้อมูลได้หลาย แบบมากๆ เรียกว่าทุกแบบเลยดีกว่า เพราะมันเขียน condition เติมเองได้ รวมไปถึงการ remote เพื่อใช้ตรวจสอบ พวกชื่อ username, email, captcha ได้โดยไม่ต้อง มีการเปลี่ยน page แต่อย่างใด
ทั้งยัง config การแสดง valid, invalid ข้อความ ได้อย่างสวยงาม แต่ว่า ผมคงไม่อธิบายหมดหรอก มันเยอะจัดเลย เหนื่อยนะ เอาแค่พอใช้งาน ได้ไปศึกษาต่อได้ก็พอแล้วล่ะ มาเริ่มกันเลยดีกว่า เริ่มจะง่วงนิดๆ ละ…
Head:
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
-
<script src="jquery.validate.js" type="text/javascript"></script>
-
<script type="text/javascript">
-
$(function() {
-
-
$(‘#demo’).validate({
-
rules: {
-
name: "required",
-
gender: "required"
-
},
-
errorPlacement: function(error, element) {
-
if (element.is(‘:radio’) || element.is(‘:checkbox’))
-
error.appendTo( element.parent().parent().next() );
-
else
-
error.appendTo( element.parent().next() );
-
},
-
success: function(label) {
-
label.html(‘ok’).addClass(’success’);
-
}
-
});
-
-
});
-
</script>
ส่วนนี้เป็นการเรียกใช้งาน plugin ครับ โดยที่ผมให้ validation เงื่อนไข
field:name, gender จำเป็นต้องต้องกรอก
ส่วนตรง errorPlacemanet นั้น ผมบังครับให้ข้อความ Error ต้องแสดงนะจุดไหน (จริงๆ ถ้าไม่ serious ก็ไม่ต้องก็ได้ มันจะไปแสดงหลัง input)
ตรง success นั้นผม ก็บอกว่า ถ้าผ่านจะให้ มันทำอะไรกับช่วง message error แทน ที่ผมทำคือ แสดง message “ok” แล้วก็เปลี่ยน class สีมันซะหน่อย
นอกจากนี้มันยัง config ได้อีกเยอะเลย เช่น
-
rules: {
-
username: {
-
required: true,
-
minlength: 5,
-
remote: check.php
-
},
-
email: {
-
required: true,
-
email: true,
-
},
-
emailconfirm: {
-
equalTo: ‘#email’
-
}
-
},
-
messages: {
-
username: {
-
required: ‘กรอกด้วยๆ’,
-
remote: ‘user นี้มีคนใช้อยู่’
-
}
-
}
แบบนี้จะเป็นการ ระบุ validate แบบเต็มๆ รวมทั้งแก้ default message บางตัวด้วย ยังไง ตรงนี้ผมขอฝากให้อ่าน manual เอาเองละกัน มันค่อนข้างจะเยอะ จริงๆ
HTML:
-
<form method="post" name="demo" id="demo" action="#">
-
<fieldset>
-
<legend>jQueryTips Demo</legend>
-
<table>
-
<tr>
-
<th>Name</th>
-
<td><input type="text" name="name" id="cname" value="" class="txt" /></td>
-
<td class="form-message"></td>
-
</tr>
-
<tr>
-
<th>Gender</th>
-
<td>
-
<label><input type="radio" name="gender" value="1" /> Male</label>
-
<label><input type="radio" name="gender" value="2" /> Female</label>
-
</td>
-
<td class="form-message"></td>
-
</tr>
-
<tr>
-
<td></td>
-
<td colspan="2"><input type="submit" value="Submit" /></td>
-
</tr>
-
</table>
-
</fieldset>
-
</form>
ส่วนนี่เป็นตัว อย่าง HTML ครับ
และเพื่อไม่ให้เสียเวลา และสร้างความเข้าใจมากขึ้น ผมได้เขียนตัวอย่างขึ้นมาไฟล์นึง พร้อมทั้งให้ Download ไปลองแกะกันดู ที่นี่ครับ
คิดว่าหลังจากได้ดูตัวอย่างและลอง view source ก็น่าจะเข้าใจได้ไม่ยากครับ แต่ว่าลูกเล่น ของ plugin ตัวนี้ นี่มีอีกเพียบเลย ครับ ยังไง ลอง ดูที่ Official Site เอาเลย
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
ใน jquery ผมเจอปัญหา เวลาที่เรา disabled button แล้ว แต่เวลาที่เราคลิกตรง button คำสั่งที่อยู่ภายใต้ button ตัวนั้นยังทำงานได้ตามปกติ ทั้งที่เรา Disalbed อยู่ ไม่เข้าใจอ่ะ
[...] jquerytips.com ได้เคยเขียนบทความ jQuery Validation ครบทุกเม็ดในการ validate [...]
Demo ของพี่โหลดไม่ได้แล้วครับ ไม่ทราบว่ายังมีอยู่หรือเปล่า หากไม่รบกวนช่วยเมลให้ผมหน่อยนะครับ ที่เคยโหลดไปดันไปลบมันไปซะแล้ว..
ขอ source หน่อยได้ไหมครับ