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

เกริ่นนำ …

บทความนี้จะใช้  jQuery validation plugin เพื่อทำงานการตรวจสอบใน ASP.NET ListBox control

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

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

2. เพิ่ม plugin validation เข้ามาใน 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. เพิ่ม ListBox control บน form และ ใส่รายการอาหาร เพื่อใช้เป็นตัวอย่างให้เลือก

<fieldset style=”width:350px;height:190px;”>
<table border=”0″ cellpadding=”3″ cellspacing=”3″>
<tr><td>
กรุณาเลือกอาหารอย่างน้อย 1 รายการ
</td></tr>
<tr><td>
<asp:ListBox ID=”ListBox1″ runat=”server” Rows=”5″ SelectionMode=”Multiple”>
<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:ListBox>
</td></tr>
<tr><td>
<asp:Button ID=”btnSubmit” runat=”server” Text=”เอาตามนี้” />
</td></tr>
</table>
</fieldset>

4.  เพิ่ม div area เพื่อแสดง error message

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

5. กำหนด CSS style สำหรับ div area ข้างต้น

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

6. พอลอง run web page ขึ้นมา หน้าตาจะคล้ายๆแบบนี้ครับ

ใส่กลไก jQuery …

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

2. กำหนด rules option สำหรับ validate() function
rules: {

3. กำหนด ListBox control ที่จำเป็น โดยการกำหนด range เลือก item ให้อยู่ในช่วง minimum และ maximum ให้เลือกได้
ListBox1: { required: true, rangelength: [0,4] }
},

4. สำหรับแต่ละ validation rules ข้างต้นให้กำหนดข้อความ error เองตามนี้
messages: {
ListBox1: { required: “กรุณาเลือกอาหารอย่างน้อย 1 รายการ”,
rangelength: “กรุณาเลือกอาหารอย่างไม่เกิน 4 รายการ”
}
},

5. นิยาม errorLabelContainer ที่ซึ่งจะแสดงข้อความ error เมื่อผลการ validate ไม่ถูกต้อง
errorLabelContainer: $(“#message”)
});

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

<script language=”javascript” type=”text/javascript”>
$(document).ready(function() {
var validator = $(“#form1”).validate({
rules: {
ListBox1: { required: true, rangelength: [0,4] }
},
messages: {
ListBox1: { required: “กรุณาเลือกอาหารอย่างน้อย 1 รายการ”,
rangelength: “กรุณาเลือกอาหารไม่เกิน 4 รายการ”
}
},
errorLabelContainer: $(“#message”)
});
});
</script>

ทดสอบ …

พอ run web form แล้วกดปุ่ม เอาตามนี้ จะขึ้นหน้าจอแบบนี้

แล้วพอเลือกเกิน 4 รายการ แล้วกดปุ่ม เอาตามนี้ จะขึ้นข้อความเตือนบนหน้าจอแบบนี้

ขอบคุณครับ 🙂

เมื่อเราทำงานได้อย่างรวดเร็ว คุณก็จะเหลือเวลามากขึ้น

ให้เอาเวลาที่เหลือนั้น ไปเพิ่มคุณภาพงานของคุณให้สูงยิ่งขึ้นสืบต่อไป

— Chav:P–

Advertisements

#asp-net, #javascript, #jquery