Jan
19
2012

วิธี validate form แบบ custom

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

Comments Off

หลังจากที่ปล่อยบทความการ Validate Form ไปได้สองบทความ ก็มีเพื่อนๆที่สนใจถามมาเกี่ยวกับการ Validate นอกจากการใช้ ปุ่ม Submit แล้วสามารถทำแบบอื่นๆได้หรือไม่ ก็เลยเขียนบทความนี้ขึ้นมาให้เพื่อนๆได้อ่านกันครับ ตามเข้ามาเลยครับ

วิธี customize หรือการปรับการทำงานต่างๆของ Plugin Validation นั้นผมกะว่าจะเขียนในบทความที่ลงลึกๆ แต่ก็เอามาเขียนแบบเฉพาะกิจเรียกน้ำย่อยให้เพื่อนๆได้อ่านกันก่อนครับ มาดูกันเลยดีกว่าครับว่าวิธีเอา Button มาใช้แทน ปุ่ม submit นั้นสามารถทำได้หรือไม่ (ปุ่มและ Text box ผมใช้ CSS3 อาจจะแสดงผลในบาง Browser ไม่ได้นะครับ)

ตัวอย่างการ Validate ด้วยปุ่ม Button:

ตัวอย่างด้านบนนี้ผมใช้ ปุ่ม Button ในการเช็ค Validate Form จะเห็นว่าสามารถทำงานได้เช่นเดียวกับปุ่ม Submit ครับ ดังนั้นเราจะใช้ TAG DIV หรือ P ก็สามารถทำได้เพราะว่าผมใช้การดัก Event Click ที่เกิดขึ้นกับ Element ที่ต้องการแล้วทำการเช็ค Form ด้วยคำสั่ง

1	$('#myForm').valid()

Function valid() นี้จะ return ค่ากลับมาเป็น True เมื่อ user นั้นกรอกข้อมูลครบตามเงื่อนไขที่เรากำหนด ถ้ากรอกไม่ครบก็จะ return false กลับมาและทำการแจ้งข้อความ Error ให้ทราบ

มาดู code ที่ผมใช้ในตัวอย่างนี้กันครับ

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

<form action="" id="myForm" method="get" onSubmit="return false;">
<input type="text" name="myText" id="myText" />
<button type="button"
name="button"
value="" id="myButton">Button Submit</button>
</form>
<script src="jquery.validate.js">
<script>
$(document).ready(function(){
$('#myForm').validate();
$('#myForm #myText').rules("add",
{
required:true,
messages:
{
required:' *กรุณากรอกข้อมูลให้ครบถ้วน'
}
});

// Check form validate
$('#myButton').click(function(){
if( $("#myForm").valid() === true ){
//do next step
$.post('php-ajax-file-path',
{myText:$('#myText').attr('value')},
function(callback){
// process your logic
},
'json');
}else{
alert('Return false');
}
});
});
</script>

จากตัวอย่าง code บรรทัดที่ 22 จะเห็นว่ามีการเรียกใช้งาน function valid() เพื่อเช็คค่าที่ Return กลับคืนมา ถ้ากรอกครบก็จะทำงานใน block if คือทำกระบวนการส่ง AJAX Request ออกไปยัง URL ที่เราต้องการและรับค่ากลับมาเป็น JSON จากนั้นจะทำอะไรต่อไปก็ขึ้นอยู่กับแต่ละท่านครับว่าจะให้งานอะไรต่อไป

หวังว่าบทความนี้จะเป็นประโยชน์สำหรับเพื่อนๆที่ต้องนำเอา Validation Plugin ตัวนี้ไปประยุตการทำงานนะครับ Code ที่ผมเขียนนี้ก็เป็นการนำมาจากการใช้งานจริงกับ Project ที่ผมพึ่งทำเสร็จไป

แถม CSS ที่ผมใช้กับ Demo ให้อีกอันครับ :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#myButton {
background-color: rgb(77, 144, 254);
border: 1px solid rgb(48, 121, 237);
border-radius: 2px 2px 2px 2px;
color: white; font-size: 11px;
font-weight: bold;
text-align: center;
top: 250px; left: 807px; width: 90px;
height: 25px;
z-index: 1201; opacity: 1;
box-shadow: 0pt 0pt 2px rgb(255, 0, 0);
cursor:pointer;
}
#myText{
width: 221px;
background: transparent url('http://www.cssportal.com/form-elements/images/bg.jpg') no-repeat;
color : #747862;
height:20px;
border:0;
padding:4px 8px;
margin-bottom:0px;

}