ASP.NET กับ jQuery: Validate ช่วงของ date ใน ASP.NET form

เกริ่นนำ …

บทความนี้ จะแสดงวิธีการ validate กล่องข้อมูลที่เป็นวันที่ โดยเปลียบเทียบ ข้อมูลวันที่ 2 ค่าว่ามีค่าอยู่ในกรอบที่เราต้องการอยู่มั้ย แต่ก่อนที่เราจะ validate date กันบทความนี้ต้องใช้กล่องเลือกวันที่ ซึ่งผมจะใช้ jQuery ui มาใช้เป็น popup แสดงวันที่ให้เลือกด้วย

สร้าง form สำหรับ validate วันที่ง่ายๆ …

1. เพิ่ม ASP.NET form เข้าไปใน projects web ของเราแล้วตั้งชื่อว่า ValidateDateRage.aspx แล้วใส่ code ส่วนนำเสนอเข้าไปใน form

<form id=”form1″ runat=”server”>

<div align=”center”>

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

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

<tr><td colspan=”2″>กรุณาเลือกช่วงเวลา:</td></tr>

<tr><td>วันที่เริ่มต้น:</td>

<td><asp:TextBox ID=”txtStartDate” runat=”server”></asp:TextBox></td></tr>

<tr><td>วันที่สิ้นสุด:</td>

<td><asp:TextBox ID=”txtEndDate” runat=”server”></asp:TextBox></td></tr>

<tr><td colspan=”2″>

<asp:Button ID=”btnSubmit” runat=”server” Text=”Submit”/>

<asp:Button ID=”btnReset” runat=”server” Text=”Reset”/></td></tr>

</table>

</fieldset>

</div>

</form>

2. ตอนนี้ผมต้องการ popup เลือกวันที่เพื่อให้ผู้ใช้ง่ายๆ ผมจะใช้ jQuery UI ไป download จาก http://jqueryui.com พอเข้าไปแล้วให้เลือก Build custom download จะมีหน้าจอ options ต่างๆตามภาพนี้ขึ้นมา ให้เลือก them ที่ชอบแล้วกด download (ผมเลือก them Sunny)

3. หลังจาก load jQuery UI มาแล้ว ให้ copy file jquery-ui-1.8.13.custom.min.js และ folder CSS ของ them sunny ไว้ใน projects ของเราแล้ว include เข้า form

<link href=”css/sunny/jquery-ui-1.8.13.custom.css” rel=”stylesheet” type=”text/css”/>

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

<script src=”js/jquery-ui-1.8.13.custom.min.js” type=”text/javascript”></script>

4. ผมจะแสดง datepicker widget ใน jQuery UI ไว้ที่ textbox แค่เรียก function datepicker เท่านั้น textbox ของผมก็จะกลายเป็น datepicker ได้ง่ายๆ เพิ่ม code ที่ document.ready() function block

$(“#txtStartDate”).datepicker();
$(“#txtEndDate”).datepicker();

5. ทดสอบ web form แล้วลองเลือก datepicker ดูครับ

ใส่กลไก jQuery …

1. เข้าไปที่ document.ready() function block ผูก event click บนปุ่ม submit โดยเขียน code ต่อจากขั้นตอนสร้าง datepicker

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

2. ปิดการทำงานของ default form ไม่ให้มัน submit

e.preventDefault();

3. อ่าน วันที่เริ่มต้น จาก datepicker

var startdate = new Date();

startdate = Date.parse($(“#txtStartDate”).val());

4. อ่าน วันที่สิ้นสุด จาก datepicker

var enddate = new Date();
enddate = Date.parse($(“#txtEndDate”).val());

5. ตรวจสอบ ถ้า วันที่เริ่มต้น มากกว่า วันที่สิ้นสุด

if (startdate > enddate) {

6. ให้แสดงข้อความ popup เตือนผู้ใช้

alert(“วันที่เริ่มต้นต้องน้อยกว่าวันที่สิ้นสุด”);
}
});

7. ผูก event click บนปุ่ม reset ให้ล้างข้อมูลใน form ทั้งหมด

$(“#btnReset”).click(function(e) {
e.preventDefault();
$(“#txtStartDate”).val(“”);
$(“#txtEndDate”).val(“”);
});

เสร็จแล้ว jQuery script validate date rage ที่ฝั่ง client

<script language=”javascript” type=”text/javascript”>
$(document).ready(function() {
$(“#txtStartDate”).datepicker();
$(“#txtEndDate”).datepicker();
$(“#btnSubmit”).click(function(e) {
e.preventDefault();
var startdate = new Date();
startdate = Date.parse($(“#txtStartDate”).val());
var enddate = new Date();
enddate = Date.parse($(“#txtEndDate”).val());
if (startdate > enddate) {
alert(“วันที่เริ่มต้นต้องน้อยกว่าวันที่สิ้นสุด”);
}
});
$(“#btnReset”).click(function(e) {
e.preventDefault();
$(“#txtStartDate”).val(“”);
$(“#txtEndDate”).val(“”);
});
});
</script>

ทดสอบ ทดสอบ …

ลองใส่วันที่เริ่มต้น ให้มากกว่าวันที่สิ้นสุด แล้วกด submi ก็จะ popup ข้อความขึ้นตามภาพ

ขอบคุณครับ 🙂

As a man thinks, he is.

มนุษย์จะ พัฒนาการไปตามอย่างที่ตนคิด

— กฏแห่งแรงดึงดูด —

Advertisements

#asp-net, #jquery