ASP.NET กับ jQuery: Validate ข้อมูล field พื้นฐานในแบบ form ข้อมูลของ user

เกริ่นนำ …

บทความนี้จะเสนอกรณีการใช้ jQuery plugin validate ข้อมูลที่ฝั่ง client บน form ลงทะเบียน

ซึ่งการ validate ข้อมูลบน form ก่อนส่งไปประมวลผลที่ฝั่ง server เป็นแนวทางปฎิบัติที่ดี(best practice) ที่ควรปฎิบัติให้เป็นเรื่องปกติในทุก form application ของคุณ

สร้าง form ลงทะเบียน …

1. เพิ่ม web form Register.aspx เข้ามาใน projects

2. ใน tag header ของ form include jQuery และ validation plugin library เข้ามาใน form

<script src=”js/jquery-1.4.1.js” type=”text/javascript”></script>

<script src=”js/jquery.validate.js” type=”text/javascript”></script>

3. ใน tag header ของ formใส่ CSS class เข้าไปตามนี้ครับ

<style media=”screen”type=”text/css”>

.header{ background-color:Gray;font-weight:bold;color:White;text-align:center;}

.errorContainer{display:none;}

.alertMsg{margin-left:20px;color:#660000;}

.mandatory{color:#FF0000;}

.input-highlight{background-color:#CCCCCC;}

</style>

4. ใน tag form ใส่  alertMsg ที่ใช้แสดง message error

<div align=”center” class=”errorContainer”>

<fieldset style=”width:550px;”>

<p align=”left” class=”alertMsg”>เกิดข้อผิดพลาด. กรุณากำเนินการตามนี้ให้ถูกต้อง:</p>

</fieldset>

</div>

5. ใน tag form ต่อจากข้อ 4 ใส่ ASP.NET control ต่างๆที่ใช้แสดงแบบ form ลงทะเบียน เข้าไปใน form Register.aspx แสดงได้ตาม code ข้างล่างนี้ครับ

<br/>

<div align=”center”>

<fieldset style=”width:350px;height:400px;”>

<table border=”0″cellpadding=”3″ cellspacing=”3″>

<tr><td colspan=”2″class=”header”>ลงทะเบียนผู้ใช้ใหม่</td></tr>

<tr><td align=”right”>ชื่อ<span class=”mandatory”>*</span></td>

<td align=”left”>

<asp:TextBoxID=”txtName”runat=”server”></asp:TextBox>

</td></tr>

<tr><td align=”right”>Email<span class=”mandatory”>*</span></td>

<td align=”left”>

<asp:TextBox ID=”txtEmail” runat=”server”></asp:TextBox>

</td></tr>

<tr><td align=”right”>Password<span class=”mandatory”>*</span></td>

<td align=”left”>

<asp:TextBox ID=”txtPassword”runat=”server”TextMode=”Password”></asp:TextBox>

</td></tr>

<tr><td align=”right”>ยืนยัน Password<span class=”mandatory”>*</span></td>

<td align=”left”>

<asp:TextBox ID=”txtConfirmPwd” runat=”server” TextMode=”Password”></asp:TextBox>

</td></tr>

<tr><td align=”right”>วันเกิด<span class=”mandatory”>*</span></td>

<td align=”left”>

<asp:TextBox ID=”txtDOB” runat=”server”></asp:TextBox>

</td></tr>

<tr><td align=”right”>ที่อยู่ 1<span class=”mandatory”>*</span></td>

<td align=”left”>

<asp:TextBox ID=”txtAddress1″runat=”server”></asp:TextBox>

</td></tr>

<tr><td align=”right”>ที่อยู่ 2</td>

<td align=”left”>

<asp:TextBox ID=”txtAddress2″runat=”server”></asp:TextBox>

</td></tr>

<tr><td align=”right”>รหัสไปรษณีย์<span class=”mandatory”>*</span></td>

<td align=”left”>

<asp:TextBox ID=”txtPostal”runat=”server”></asp:TextBox>

</td></tr>

<tr><td align=”right”>Website</td>

<td align=”left”>

<asp:TextBox ID=”txtWebsite”runat=”server”></asp:TextBox>

</td></tr>

<tr><td colspan=”2″>

<asp:CheckBox ID=”chkTandC”runat=”server”/>

ฉันยอมรับเงื่อนไข</td></tr>

<tr><td colspan=”2″align=”center”>

<asp:Button ID=”btnSubmit”runat=”server”Text=”ดำเนินการ/>

&nbsp;<asp:Button ID=”btnReset”runat=”server”Text=”เริ่มใหม่/></td></tr>

</table>

</fieldset>

</div>

6. ทดสอบ form โดย run form Register ขึ้นมาครับ

จาก Register form ผมจะเพิ่ม rule เข้าไปเพื่อทำการ validate ข้อมูล ดังนี้

  • Rule 1 : ชื่อ จำเป็นต้องมีค่า
  • Rule 2 : Email จำเป็นต้องมีค่า และ มี format Email ที่ถูกต้อง
  • Rule 3 : Password จำเป็นต้องมีค่า และ มีความยาวอย่างน้อย 8 ตัว
  • Rule 4 : ยืนยัน Password จำเป็นต้องมีค่า, มีความยาวอย่างน้อย 8 ตัว และมีค่าตรงกับ Password
  • Rule 5 : วันเกิด จำเป็นต้องมีค่า และ มี format date ที่ถูกต้อง
  • Rule 6 : ที่อยู่ 1 จำเป็นต้องมีค่า และไม่เกิน 100 ตัวอักษร
  • Rule 7 : ที่อยู่ 2 มีค่าไม่เกิน 100 ตัวอักษร
  • Rule 8 : รหัสไปรษณีย์ จำเป็นต้องมีค่า และ มี format เป็นตัวเลข ที่ถูกต้อง
  • Rule 9 : Website มี format เป็น URL ที่ถูกต้อง
  • Rule10: ฉันยอมรับเงื่อนไข ต้องถูกเช็คทุกครั้ง
  • ผมจะแสดงค่า message error จากการ validate ออกมาที่ alertmsg container ที่เตรียมไว้

ใส่กลไก jQuery …

1. ใน document.ready() function ของ jQuery script block กำหนด default option สำหรับ validate() function:

$.validator.setDefaults({

2. ใช้ highlight option ให้เพิ่ม input-highlight class ให้มองไม่เห็น field

highlight: function(input) {
$(input).addClass(“input-highlight”);
},

3. ใช้ unhighlight option เพื่อ remove input-highlight CSS class จาก field

unhighlight: function(input) {
$(input).removeClass(“input-highlight”);
}
});

4. หลังจากกำหนด default options แล้วตอนนี้ให้เรียก validate() function บน web form

var validator = $(“#form1”).validate({

5. เพิ่ม rule ของเราเพื่อ validation

rules: {

6. ใส่ Rule 1: ชื่อ จำเป็นต้องมีค่า

txtName: “required”,

7. ใส่ Rule 2: Email จำเป็นต้องมีค่า และ มี format Email ที่ถูกต้อง

txtEmail: { required: true, email: true },

8. ใส่ Rule 3: Password จำเป็นต้องมีค่า และ มีความยาวอย่างน้อย 8 ตัว

txtPassword: { required: true, minlength: 8 },

9. ใส่ Rule 4: ยืนยัน Password จำเป็นต้องมีค่า, มีความยาวอย่างน้อย 8 ตัว และมีค่าตรงกับ Password

txtConfirmPwd: { required: true, minlength: 8, equalTo: “#txtPassword” },

10. ใส่ Rule 5: วันเกิด จำเป็นต้องมีค่า และ มี format date ที่ถูกต้อง

txtDOB: { required: true, date: true },

11. ใส่ Rule 6: ที่อยู่ 1 จำเป็นต้องมีค่า และไม่เกิน 100 ตัวอักษร

txtAddress1: { required: true, maxlength: 100 },

12. ใส่ Rule 7: ที่อยู่ 2 มีค่าไม่เกิน 100 ตัวอักษร

txtAddress2: { maxlength: 100 },

13. ใส่ Rule 8: รหัสไปรษณีย์ จำเป็นต้องมีค่า และ มี format เป็นตัวเลข ที่ถูกต้อง

txtPostal: { required: true, digits: true },

14. ใส่ Rule 9: Website มี format เป็น URL ที่ถูกต้อง

txtWebsite: { url: true },

15. ใส่ Rule 10: ฉันยอมรับเงื่อนไข ต้องถูกเช็คทุกครั้ง

chkTandC: “required”
},

16. สำหรับแต่ละ validation ข้างบนให้แนบข้อความการเพื่อแจ้งผลในแต่ละ control

messages: {
txtName: “กรุณากรอกชื่อของคุณ”,
txtEmail: { required: “กรุณากรอก Email ของคุณ”,
email: “กรุณากรุณาที่อยู่ email ที่ถูกต้อง”
},
txtPassword: { required: “กรุณากรอก Password ของคุณ”,
minlength: “Password ควรจะไม่น้อยกว่า 8 ตัวอักษร”
},
txtConfirmPwd: { required: “กรุณากรอกยืนยัน Password ของคุณ”,
minlength: “ยืนยัน Password ควรจะไม่น้อยกว่า 8 ตัวอักษร”,
equalTo: “กรุณากรอก password และ ยืนยัน Password ควรจะเหมือนกัน”
},
txtDOB: { required: “กรุณากรอกวันเกิดของคุณ”,
date: “กรุณากรอกวันเกิดที่ถูกต้อง”
},
txtAddress1: { required: “กรุณากรอกที่อยู่ส่งเอกสาร”,
maxlength: “ที่อยู่สามารถใส่ได้ไม่เกิน 100 ตัวอักษร”
},
txtAddress2: { maxlength: “ที่อยู่สามารถใส่ได้ไม่เกิน 100 ตัวอักษร”
},
txtPostal: { required: “กรุณากรอกรหัสไปรษณีย์”,
digits: “กรุณากรอกรหัสไปรษณีย์ที่ถูกต้อง”
},
txtWebsite: { url: “กรุณากรอก URL ที่ถูกต้อง”
},
chkTandC: { required: “กรุณายอมรับข้อตกลงเพื่อดำเนินการต่อไป” }
},

17. กำหนดตัวห่อหุ้ม message error ด้วย

wrapper: ‘li’,

18. กำหนดพื้นที่ให้ errorContainer โดยใช้  jQuery CSS selector
errorContainer: $(“div.errorContainer”),

19. จากข้างบน พื้นที่ภายในของ errorContainer ให้กำหนด errorLabelContainer เพื่อแสดง error message ที่จำเป็น โดยใช้  jQuery CSS selector
errorLabelContainer: $(“#form1 p.alertMsg”)
});

20. เมื่อกด click event ของปุ่ม Reset ใช้ resetForm() function ของ  jQuery form plugin เพื่อ reset ข้อมูลบน form
$(“#btnReset”).click(function(e) {
e.preventDefault();
$(“#form1”).resetForm();
});

สรุปกลไก jQuery ที่สมบูรณ์

$(document).ready(function() {

$.validator.setDefaults({

highlight: function(input) {

$(input).addClass(“input-highlight”);

},

unhighlight: function(input) {

$(input).removeClass(“input-highlight”);

}

});

var validator = $(“#form1”).validate({

rules: {

txtName: “required”,

txtEmail: { required: true, email: true },

txtPassword: { required: true, minlength: 8 },

txtConfirmPwd: { required: true, minlength: 8, equalTo: “#txtPassword” },

txtDOB: { required: true, date: true },

txtAddress1: { required: true, maxlength: 100 },

txtAddress2: { maxlength: 100 },

txtPostal: { required: true, digits: true },

txtWebsite: { url: true },

chkTandC: “required”

},

messages: {

txtName: กรุณากรอกชื่อของคุณ,

txtEmail: { required: กรุณากรอก Email ของคุณ,

email: กรุณากรุณาที่อยู่ email ที่ถูกต้อง

},

txtPassword: { required: กรุณากรอก Password ของคุณ,

minlength: “Password ควรจะไม่น้อยกว่า 8 ตัวอักษร

},

txtConfirmPwd: { required: กรุณากรอกยืนยัน Password ของคุณ,

minlength: ยืนยัน Password ควรจะไม่น้อยกว่า 8 ตัวอักษร,

equalTo: กรุณากรอก password และ ยืนยัน Password ควรจะเหมือนกัน

},

txtDOB: { required: กรุณากรอกวันเกิดของคุณ,

date: กรุณากรอกวันเกิดที่ถูกต้อง

},

txtAddress1: { required: กรุณากรอกที่อยู่ส่งเอกสาร,

maxlength: ที่อยู่สามารถใส่ได้ไม่เกิน 100 ตัวอักษร

},

txtAddress2: { maxlength: ที่อยู่สามารถใส่ได้ไม่เกิน 100 ตัวอักษร

},

txtPostal: { required: กรุณากรอกรหัสไปรษณีย์,

digits: กรุณากรอกรหัสไปรษณีย์ที่ถูกต้อง

},

txtWebsite: { url: กรุณากรอก URL ที่ถูกต้อง

},

chkTandC: { required: กรุณายอมรับข้อตกลงเพื่อดำเนินการต่อไป }

},

wrapper: ‘li’,

errorContainer: $(“div.errorContainer”),

errorLabelContainer: $(“#form1 p.alertMsg”)

});

$(“#btnReset”).click(function(e) {

e.preventDefault();

$(“#form1”).resetForm();

});

});

ทดสอบ …

Testcase 1: เปิด form แล้วกดปุ่ม ดำเนินการต่อ ทันที

Testcase 2: เปิด form ใส่ชื่อ, ใส่ email ไม่ถูก format, ใส่ password น้อยกว่า 8 ตัว กด ดำเนินการต่อ

ก็ทดลองเขียน testcase อื่นๆดูนะครับ ส่วนผมก็ขอจบบทความเพียงเท่านั้น

ขอบคุณครับ

Advertisements

#asp-net, #jquery