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

เกริ่นนำ …

ตัว ASP.NET CustomValidator control สามารถใช้ jQuery เพื่อ validate RadioButtonList control บน site ของ client ได้ ในบทความนี้ผมจะสมมติ web form โดยจะ validate RadioButtonList คล้ายๆกับ  ASP.NET RequiredFieldValidator

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

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

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

<fieldset style=”width:350px;height:200px;”>
<table border=”0″ cellpadding=”3″ cellspacing=”3″>
<tr><td>กรุณาเลือกอาหาร:</td></tr>
<tr><td>
<asp:RadioButtonList ID=”RadioButtonList1″ runat=”server”>
<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:RadioButtonList>
</td></tr>
<tr><td>
<asp:Button ID=”btnSubmit” runat=”server” Text=”เอาจานนี้” />
</td></tr>
</table>
</fieldset>

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

<asp:CustomValidator ID=”CustomValidator1″ runat=”server” ErrorMessage=”กรุณาเลือกอาหาร” Display=”Dynamic” ClientValidationFunction=”RadioButtonList1_Validate”></asp:CustomValidator>

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

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

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

ใส่กลไก jQuery …

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

function RadioButtonList1_Validate(sender, args) {

2. ใช้ jQuery selector เข้าไปใน item ของ RadioButtonList1 แล้วตรวจสอบ length มีค่ามากกว่า 0 มั้ย และกำหนดไปยัง args.IsValid

args.IsValid = ($(“#RadioButtonList1 :radio:checked”).length > 0);
}

3. เมื่อใส่กลไล jQuery เสร็จแล้ว จะได้ code หน้าตาแบบนี้ครับ

<script language=”javascript” type=”text/javascript”>
function RadioButtonList1_Validate(sender, args) {
args.IsValid = ($(“#RadioButtonList1 :radio:checked”).length > 0);
}
</script>

ทดสอบ …

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

ขอบคุณครับ 🙂

โลโภ ธัมมานัง ปริปันโถ

ความโลภเป็นอันตรายต่อความดีงาม

— พระพุทธเจ้า —

Advertisements

#asp-net, #javascript, #jquery