ASP.NET กับ jQuery: Validate ข้อความที่จำกัดใน Multiline ASP.NET TextBox

เกริ่นนำ …

บทความนี้อธิบายขั้นตอนการสร้าง ASP.NET form ที่มี TexBox แบบ multiline หรือ กล่องข้อความที่เตรียมไว้กรอกข้อมูลมากกว่า 1 บรรทัด เช่น ที่อยู่, คำแนะนำ, ความคิดเห็น อื่นๆ และต้องการ validate ความยาวของข้อความที่กรอกไม่ให้เกิน หรือน้อยกว่าค่าที่เรากำหนดไว้ โดยใช้ jQuery

สร้าง form แสดงความคิดเห็น …

1. ที่ project web เพิ่ม web form ใหม่ตั้งชื่อว่า CommentTextBox.aspx

2. เพิ่ม TextBox เข้าไปใน form ที่สร้างขึ้น เปลี่ยน property TextMode เป็น MultiLine และ Control อื่นๆตาม code ข้างล่างนี้

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

<div align=”center”>

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

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

<tr><td>กรุณากรอกข้อคิดเห็นของคุณข้างล่าง:</td></tr>

<tr><td><asp:TextBox ID=”TextBox1″runat=”server”TextMode=”MultiLine”Rows=”7″Width=”300px”></asp:TextBox>

</td></tr>

<tr><td>จำนวนตัวอักษร:

<asp:TextBox ID=”TextBox2″ runat=”server” Width=”30px” ReadOnly=”true”></asp:TextBox></td></tr>

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

</table>

</fieldset>

</div>

</form>

3. อ่าน code form ข้างบนผมได้เพิ่มพืนที่ div message เข้าไปใน form เพื่อใช้แสดง message error ไว้ด้วย

4. แนบ CSS class สำหรับพื้นที่ div

.alertmsg{color:#FF0000;}

5. web form เมื่อแสดงออกมาหน้าตาแบบนี้

ผมจะ validate form user comment โดยความยาวของข้อคิดเห็นต้องมีค่าไม่น้อยกว่า 5 และต้องไม่เกิน 200 ตัวอักษร

ใส่กลไก jQuery …

1. ใน document.ready() function ของ jQuery script block กำหนด ตัวแปรค่าคงที่ขนาดของตัวอักษรใน multiline textbox ไม่ต่ำกว่า 5 ตัวอักษร

var minCount = 5;

2. นิยามตัวแปรเหมือนข้อ 1 แต่เป็นค่าคงที่ขนาดของตัวอักษรใน multiline textbox ไม่เกิน 200 ตัวอักษร

var maxCount = 200;

3. disable ความสามารถ cut/copy/paste บน multiline textbox เพื่อให้เรานับจำนวณข้อความได้โดยใช้ keypress เท่านั้น

$(“#TextBox1”).bind(“cut copy paste”, function(e) { e.preventDefault(); });

4. bind event keypress ให้ multiline textbox

$(“#TextBox1”).bind(“keypress keyup”, function() {

5. เอาความยาวของข้อความมาเก็บไว้ที่ตัวแปร strCount

var strCount = $(“#TextBox1”).val().length;

6.แสดง strCount ที่ readonly TextBox2

$(“#TextBox2”).val(strCount);

7. ตรวจสอบความยาวของข้อความใน multiline texbox ตาม rage ที่กำหนดไว้คือ ต้องไม่เกิน 200 และ ไม่ต่ำกว่า 5 ตัวอักษร

if ((strCount < minCount) || (strCount > maxCount)) {

8. ถ้า strCount ไม่อยู่ใน range ให้แสดงข้อความแจ้งผู้ใช้ว่า ข้อความต้องมีความยาวไม่เกินขอบเขตที่กำหนดไว้ ที่พื้นที่ div ของ message ที่เตรียมไว้

$(“#message”).text(“ข้อความต้องมีความยาวอยู่ในช่วง 5 – 200”);
}

9. ถ้า strCount อยู่ใน rage ให้ clear ค่าใน message แจ้งเตือน

else {
$(“#message”).text(“”);
}
});

นี่คือ Code jQuery ที่สมบูรณ์แล้ว

<script type=”text/javascript”>

$(document).ready(function() {

var minCount = 5;

var maxCount = 200;

$(“#TextBox1”).bind(“cut copy paste”, function(e) {

e.preventDefault();

});

$(“#TextBox1”).bind(“keypress keyup”, function() {

var strCount = $(“#TextBox1”).val().length;

$(“#TextBox2″).val(strCount);

if ((strCount < minCount) || (strCount > maxCount)) {

$(“#message”).text(“ข้อความต้องมีความยาวอยู่ในช่วง 5 – 200″);

}

else {

$(“#message”).text(“”);

}

});

});

</script>

ทดสอบ …

ใส่ 1234 เข้าไปจะแสดงตามภาพข้างล่างนี้

เสร็จแล้วครับ Validate ข้อความที่จำกัดใน Multiline ASP.NET TextBox

ขอบคุณครับ

Advertisements

#asp-net, #jquery