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

เกริ่นนำ …

บทความนี้จะแสดงการ validation กับ ASP.NET CheckBoxList โดยจะตรวจสอบว่า ผู้ใช้ check item ตามจำนวนที่ต้องการแล้วหรือยัง

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

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

2. เพิ่ม CheckBoxList control บน form และ ใส่รายการอาหาร เพื่อใช้เป็นตัวอย่างให้เลือก

<fieldset style=”width:350px;height:200px;”>
<table border=”0″ cellpadding=”3″ cellspacing=”3″>
<tr><td>
กรุณาเลือกรายการอาหารอย่างน้อย 3 รายการ:</td></tr>
<tr><td>
<asp:CheckBoxList ID=”CheckBoxList1″ runat=”server”>
<asp:ListItem Text=”ข้าวกระเพราหมูกรอบ” Value=”F1″></asp:ListItem>
<asp:ListItem Text=”ข้าวผัดปู” Value=”F2″></asp:ListItem>
<asp:ListItem Text=”ข้าวหมกไก่” Value=”F3″></asp:ListItem>
<asp:ListItem Text=”ข้าวหน้าแกงกะหรี่เนื้อ” Value=”F4″></asp:ListItem>
<asp:ListItem Text=”ข้าวขาหมู” Value=”F5″></asp:ListItem>
</asp:CheckBoxList>
</td></tr>
<tr><td><asp:Button ID=”btnSubmit” runat=”server” Text=”เอาตามนี้” /></td></tr>
</table>
</fieldset>

3. เพื่อต้องการ validate CheckBoxList และแสดงข้อความผลการ validate เพิ่ม ASP.NET CustomValidator control เข้าไปใน form

<asp:CustomValidator ID=”CustomValidator1″ runat=”server” Display=”Dynamic” ErrorMessage=”กรุณาเลือกรายการอาหารอย่างน้อย 3 รายการ” ClientValidationFunction=”CheckBoxList1_Validation”></asp:CustomValidator>

คำอธิบาย Attribute ของ CustomValidator:

  • ErrorMessage: สามารถกำหนดได้ตามใจเพื่อแจ้งเตือนผู้ใช้เมื่อ validate ข้อมูลไม่ถูกต้อง ตาม code ตัวอย่างนี้ระบุเป็น “กรุณาเลือกรายการอาหารอย่างน้อย 3 รายการ”
  • ClientValidationFunction: จะกำหนดเป็น validation ที่ฝั่ง client โดย function CheckBoxList1_Validation นี้จะเขียนด้วย jQuery แสดงในลำดับต่อไป
  • Display: กำหนดให้เป็นแบบ Dynamic ดังนั้นหากข้อมูลยังไม่ผ่าน validation ErrorMessage จะไม่แสดงออกมา

4. web form ValidateCheckBoxList เมื่อแสดงออกมาจะมีหน้าตาคล้ายๆแบบนี้ครับ

ใส่กลไก jQuery …

1. ใน javascript block กำหนด function ของ ClientValidationFunction ใน CustomValidator ตามนี้

function CheckBoxList1_Validation(sender, args){

2. ค่า default ของ return function ให้มีค่าเป็น false

args.IsValid = false;

3. เอาค่าจำนวนของ CheckBoxList1 ที่มีการ checked โดยใช้ jQuery selector

var cnt = $(“#CheckBoxList1 input:checked”).length;

4.retrun ค่าเป็น true ก็ต่อเมื่อ จำนวนของ checkbox ที่มีการ checked มากกว่าหรือเท่ากับ 3

args.IsValid = (cnt >= 3);
}

5. เมื่อใส่กลไล jQuery เสร็จแล้ว จะได้ code แบบนี้

<script language=”javascript” type=”text/javascript”>
function CheckBoxList1_Validation(sender, args)
{
args.IsValid = false;
var cnt = $(“#CheckBoxList1 input:checked”).length;
args.IsValid = (cnt >= 3);
}
</script>

ทดสอบ …

เปิด web form ขึ้นมาแล้วลองเลือกสัก 2 รายการ แล้วกดปุ่ม เอาตามนี้ จะได้ หน้าตา แบบนี้

ขอบคุณครับ 🙂

การประดิษฐ์ software นั้นไม่ยาก

แค่เราคิดว่ามันไม่ง่าย ก็เท่านั้นเอง

— Chav.P —

Advertisements

#asp-net, #javascript, #jquery