ASP.NET กับ jQuery: ใช้ jQuery validation plugin ใน UserLogin form ง่ายๆ

เกริ่นนำ …

บทความนี้จะนำเสนอการใช้ jQuery plugin validation form ที่ฝั่ง client ก่อนที่จะส่งข้อมูลบน form มาประมวลผลที่ server ผมจะแสดง form ง่ายๆก่อนในบทความนี้ และบทความต่อๆไปที่จะตามมา ดังนี้

เริ่มต้น install jQuery และ validation plugin กันก่อน …

1. download jQuery library จาก http://jquery.com/
2. download plugin ของ jQuery validation จาก http://plugins.jquery.com/project/validate
3. เมื่อได้ file มาแล้วให้ add เข้ามาใน folder javascript ใน web projects ของเราแล้ว include เข้ามาใน page ที่ต้องการใช้ jQuery คล้ายๆแบบนี้

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

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

คุณจะเห็นว่าที่บรรทัดแรกเราต้อง include jQuery library เข้ามาก่อนเสมอ เพราะ validation plugin มัน base อยู่บน jQuery library ครับ

สร้าง form User Login ง่ายๆ …

หลังจาก load และ include เข้ามาใน projects เรียบร้อยแล้วก็มาเริ่มทำ Validation ใน user login form กันเลยครับ
1. เพิ่ม web form UserLogin.aspx เข้ามาใน projects
2. ที่ส่วน header ของ form include jQuery library และ validation plugin เข้ามาใน form ตามวิธีการที่กล่าวไปแล้วข้างต้น
3. ใส่ login ASP.NET control ง่ายๆเข้าไปใน form แสดงได้ตาม code ข้างล่างนี้ครับ

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

<tr><td colspan=”2″ class=”header”>LOGIN USER</td></tr>

<tr>

<td align=”right”>

<asp:Label ID=”lblUserName” runat=”server” Text=”UserName: “></asp:Label>

</td>

<td align=”left”>

<asp:TextBox ID=”txtUserName” runat=”server”></asp:TextBox>

</td>

</tr>

<tr>

<td align=”right”>

<asp:Label ID=”lblPassword” runat=”server” Text=”Password: “></asp:Label>

</td>

<td align=”left”>

<asp:TextBox ID=”txtPassword” runat=”server” TextMode=”Password”></asp:TextBox>

</td>

</tr>

<tr>

<td align=”center” colspan=”2″>

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

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

</td>

</tr>

</table>

4. เพิ่ม alertmsg ไว้แจ้งเตือนผลการ validate ข้อมูล

<div align=”center” class=”alertmsg”> </div>

5. ที่ส่วน header ของ form เพิ่ม CSS class ให้กับ alertmsg จากข้อ 4

.alertmsg {color:#FF0000;}

6. ลอง run page ขึ้นมาครับ

จาก login user form ผมจะเพิ่ม rule เพื่อ validate ข้อมูล ดังนี้

  • Rule ที่ 1 : UserName เป็นข้อมูลที่จำเป็น ห้ามมีค่าว่าง
  • Rule ที่ 2 : Password เป็นข้อมูลที่จำเป็น ห้ามมีค่าว่าง และ  ต้องมีค่าอย่างต่ำ 8 ตัวอักษร
  • ผมจะแสดงค่า message error จากการ validate ออกมาที่ alertmsg ที่เตรียมไว้

ใส่กลไก jQuery …

1. ที่ document.ready() ใส่ jQuery script เข้าไปใน block function เพื่อ bind การ validate กับ form1

var validator = $(“#form1”).validate({

2. เพิ่ม rules option ตาม rule1 และ rule2

rules: {
txtUserName: “required”,
txtPassword: { required: true, minlength: 8 }
},

3. แสดง message error

messages: {
txtUserName: “Please enter your UserName”,
txtPassword: { required: “Please enter your Password”,
minlength: “Password should be at least 8 characters long”
}
},

4. กำหนดตัวห่อหุ้ม message error ด้วย

wrapper: ‘li’,

5. กำหนด message ที่แสดง message error

errorLabelContainer: $(“#form1 div.alertmsg”)
});//ปิด validate rules option

7. bind event click ไว้ที่ปุ่ม reset

$(“#btnReset”).click(function(e) {
e.preventDefault();
$(“#txtUserName”).val(“”);
$(“#txtPassword”).val(“”);
});//ปิด block click function
});//ปิด block ready function

เสร็จแล้วครับในส่วนของกลไล jQuery script สรุป

$(document).ready(function() {
var validator = $(“#form1”).validate({
rules: {
txtUserName: “required”,
txtPassword: { required: true, minlength: 8 }
}
,
messages: {
txtUserName: “Please enter your UserName”,
txtPassword: { required: “Please enter your Password”,
minlength: “Password should be at least 8 characters long”
}
},
wrapper: ‘li’,
errorLabelContainer: $(“#form1 div.alertmsg”)
});
$(“#btnReset”).click(function(e) {
e.preventDefault();
$(“#txtUserName”).val(“”);
$(“#txtPassword”).val(“”);
});
});

ทดสอบ …

Testcase 1: เปิด form แล้วกด submit ทันที

Testcase 2: เปิด form แล้วใส่ชื่อ และใส่ password ไม่ถึง 8 ตัวอักษร

ผมของจบทดความ ASP.NET กับ jQuery: ใช้ jQuery validation plugin ใน UserLogin form ง่ายๆ เพียงเท่านี้ครับ

ใน ASP.NET validator control ก็มีครับ แต่ผมคิดว่า jQuery validation plugin นี้ก็ใช้ง่ายกว่านะ ลองทำดูก็ได้ครับ …

ขอบคุณครับ 🙂

Advertisements

#asp-net, #javascript, #jquery