ASP.NET กับ jQuery: Validate ข้อมูลใน ASP.NET DropDownList Control

เกริ่นนำ …

ในบทความนี้ผมจะเอา jQuery validation plugin มาใช้ validate ข้อมูลใน ASP.NET DropDownList control

สร้าง form ง่ายๆให้มี DropDownList …

1. เพิ่ม Web Form เข้า project web application ของคุณ แล้วตั้งชื่อว่า ValidateDropDownList.aspx

2. เพิ่ม jQuery validation plugin เข้ามาใน web form

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

3. เพิ่ม DropDownList control เข้าไปใน form และแนบ CSS class required เข้าไปใน control นี้ด้วย เพิ่มตัวอย่างข้อมูลเพื่อใช้แสดงให้เลือกเข้าไปอีกเล็กน้อย

<fieldset style=”width:350px;height:100px;”>
<table border=”0″ cellpadding=”3″ cellspacing=”3″>
<tr><td>
กรุณาเลือกอาหารมื้อเที่ยง:
</td></tr>
<tr><td>
<asp:DropDownList ID=”DropDownList1″ runat=”server” ToolTip=”กรุณาเลือกอาหารมื้อเที่ยง” CssClass=”required”>
<asp:ListItem Text=”” Value=””>–กรุณาเลือก–</asp:ListItem>
<asp:ListItem Text=”ข้าวกระเพราหมูกรอบ” Value=”F01″></asp:ListItem>
<asp:ListItem Text=”ข้าวผัดปู” Value=”F02″></asp:ListItem>
<asp:ListItem Text=”ข้าวหมกไก่” Value=”F03″></asp:ListItem>
<asp:ListItem Text=”ข้าวหน้าแกงกะหรี่เนื้อ” Value=”F04″></asp:ListItem>
<asp:ListItem Text=”ข้าวขาหมู” Value=”F05″></asp:ListItem>
</asp:DropDownList>
</td></tr>
<tr><td>
<asp:Button ID=”btnSubmit” runat=”server” Text=”จะกิน” />
</td></tr>
</table>
</fieldset>

4. เพิ่ม div area สำหรับแสดงข้อความ required error

<div id=”message” class=”alertmsg”></div>

5. เพิ่ม CSS class สำหรับ control ที่อยู่ใน div area ข้างต้น ไว้ในส่วน head ของ form

<style type=”text/css” media=”screen”>.alertmsg{color:#FF0000;}</style>

6. เมื่อ run form ขึ้นมาจะมีหน้าตาแบบนี้

ใส่กลไก jQuery …

1. ใน jQuery script block ของ function document.ready() ให้เรียก function validate() บน web form โดยใช้ jQuery selector
var validator = $(“#form1”).validate({

2. กำหนด errorLabelContainer เพื่อแสดงข้อความ error เพื่อการ validate ไม่ถูกต้อง
errorLabelContainer: $(“#message”)

3. jQuery ที่เขียนเสร็จแล้ว จะมีหน้าตาแบบนี้

<script language=”javascript” type=”text/javascript”>
$(document).ready(function() {
var validator = $(“#form1”).validate({
errorLabelContainer: $(“#message”)
});
});
</script>

ทดสอบ …

พอ run form แล้วกดปุ่ม จะกิน form จะแสดงหน้าตาแบบนี้

ครับสำหรับ บทความนี้เป็นบทความสุดท้ายในเรื่องเทคนิค ASP.NET กับ jQuery ในกลุ่มของ validation หวังว่าคงเป็นประโยชน์ ต่อคุณเพื่อจะนำไป validate ข้อมูลใน client(client tier) ก่อนที่จะส่งข้อมูลที่ไม่ถูกต้องมายัง server(server tier) เพื่อประมวลผลใดๆต่อไป เพราะการ validate ข้อมูลใน client ก่อนจะช่วยลดจำนวนการสื่อสารระหว่าง client กับ server ได้เป็นอย่างมาก ก็คือแทนที่จะต้องส่งผลตรวจสอบข้อมูลที่ไม่ถูกต้องกลับไปยัง client อยู่บ่อยๆก็ไม่ต้องอีกเลย เพราะข้อมูลถูกตรวจสอบอย่างถูกต้องแล้วที่ฝั่ง client ก่อนส่ง มาประมวลผลที่ฝั่ง server เป็นที่เรียบร้อยแล้วทุกครั้ง แต่ที่ฝั่ง server ก็ยังคง validate อยู่เหมือนเดิมนะครับ ไม่ใช่ว่า cleint validate แล้ว server อยากจะประหยัดไม่ต้องทำกลัวจะไปซ้ำซ้อนกับฝั่ง client ไม่ใช่ครับ คือมันก็ยังคงเป็นเหตุผลเดียวกับ validate ที่ฝั่ง client แต่เป็นการสื่อสารด้าน server เองระหว่าง application server กับ database server ไงครับ

ในบทความชุด ASP.NET กับ jQuery ลำดับต่อไปคือ jQuery กับ ASP.NET: การทำงานกับ GridView Control เริ่มต้น

ขอบคุณครับ 🙂

มองลึก – นึกไกล – ใจกว้าง

— ว.วชิรเมธี —

Advertisements

#asp-net, #javascript, #jquery