Validate Form ด้วย JavaScript

naruphos · 16 พฤษภาคม 2011, 00:02:48

บทความนี้สามารถตอบโจทย์ผู้มีปัญหาเกี่ยวกับการเขียน Script เพื่อตรวจสอบข้อมูลในฟอร์มก่อนส่ง Submit สำหรับโปรแกรมเมอร์นั้นคงจะง่ายสำหรับใครบางคนที่บอกว่าก็แค่เขียน if else ดักไปทีละส่วน ๆ แต่สำหรับผมโปรเกรมเมอร์ที่ขี้เกียจที่สุดในโลก ผมไม่ชอบที่จะมาเขียนซ้ำ ๆ ในเมื่อ Script การตรวจสอบฟอร์มหรือ Validate Form เป็นส่วนสำคัญที่ต้องใช้ทุกครั้งในการเขียนเว็บ

ดังนั้นผมจึงเขียนมันออกมาเป็น Function JavaScript ที่ใช้งานง่ายเพียง 3 ขั้นตอนเท่านั้นครับ มาเริ่มกันเลยดีกว่า

1. เรียกใช้ไฟล์ Validation Form ภายในแท็ก head

โค้ด เลือก


   <head>
      <script src="function.validation.js" type="text/javascript"></script>
   </head>

2. ภายในแท็ก form ใส่ onsubmit="javascript: return fn_submit('frm');"

โค้ด เลือก


   <form method="post" name="frm" id="frm" onsubmit="javascript: return fn_submit('frm');">

3. เขียนคำสั่งที่ช่องรับข้อมูล ที่ต้องการให้มีการตรวจสอบครับ โดยคำสั่งที่ใช้คือ rel=""

โค้ด เลือก


   ชื่อ:
   <input type="text" name="txt_name" id="txt_name" rel="ชื่อ:!isempty,isthai,minlength=2" />

สำหรับคำสั่ง SYNTAX ภายใน rel ท่านสามารถโหลดไฟล์ Script และตัวอย่างได้ที่ http://www.siamdevcool.com/2011/05/javascript-validate-form.html

Validate Form ด้วย JavaScript

naruphos