ใจจริงนั้น วันนี้ขี้เกียจอัพเดทมากๆ แต่นี่ก็ใกล้จะหมดเดือน เมษาแล้ว และถ้าอัพบทความนี้สำเร็จ ก็จะกลายเป็นเดือน ที่มีบทความอัพเดทมากที่สุด นั่นก็คือ "11 บทความ" เรียกว่าเป็นการทำลายสถิติ ตัวเอง นั่นเอง 555+

นานมาแล้วครั้งนึงผมเคยแนะนำ plugin ของ jQuery ที่ชื่อว่า Really Simple Validation ซึ่งก็เอาไว้ใช้ทำงาน validate ข้อมูลจาก Form เป็นตัวที่ค่อนข้างจะใช้งานง่ายมากเลยทีเดียว

แต่ในชีวิตจริงผมไม่ค่อยจะใช้ตัวนั้นหรอกครับ ตัวที่ผมใช้มันคือ ตัวนี้ครับ แต่ด้วยความที่มัน ฉลาดและมากความสามารถ แน่นอน มันต้องทำให้ผมเหนื่อยในการที่จะ่ายทอดออกมาแน่ๆ เลยเพิ่งจะมาขยันเอาตอนนี้แหละครับ

สำหรับ validation plugin ตัวนี้นั้น สามารถที่จะ ตรวจเช็ค ข้อมูลได้หลาย แบบมากๆ เรียกว่าทุกแบบเลยดีกว่า เพราะมันเขียน condition เติมเองได้ รวมไปถึงการ remote เพื่อใช้ตรวจสอบ พวกชื่อ username, email, captcha ได้โดยไม่ต้อง มีการเปลี่ยน page แต่อย่างใด

ทั้งยัง config การแสดง valid, invalid ข้อความ ได้อย่างสวยงาม แต่ว่า ผมคงไม่อธิบายหมดหรอก มันเยอะจัดเลย เหนื่อยนะ เอาแค่พอใช้งาน ได้ไปศึกษาต่อได้ก็พอแล้วล่ะ มาเริ่มกันเลยดีกว่า เริ่มจะง่วงนิดๆ ละ...

Head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function() {
 
                $(‘#demo’).validate({
                        rules: {
                                name: "required",
                                gender: "required"
                        },
                        errorPlacement: function(error, element) {
                                if (element.is(‘:radio’) || element.is(‘:checkbox’))
                                        error.appendTo( element.parent().parent().next() );
                                else
                                        error.appendTo( element.parent().next() );
                        },
                        success: function(label) {
                                label.html(‘ok’).addClass(’success’);
                        }
                });
 
        });
</script>

ส่วนนี้เป็นการเรียกใช้งาน plugin ครับ โดยที่ผมให้ validation เงื่อนไข
field:name, gender จำเป็นต้องต้องกรอก

ส่วนตรง errorPlacemanet นั้น ผมบังครับให้ข้อความ Error ต้องแสดงนะจุดไหน (จริงๆ ถ้าไม่ serious ก็ไม่ต้องก็ได้ มันจะไปแสดงหลัง input)

ตรง success นั้นผม ก็บอกว่า ถ้าผ่านจะให้ มันทำอะไรกับช่วง message error แทน ที่ผมทำคือ แสดง message "ok" แล้วก็เปลี่ยน class สีมันซะหน่อย

นอกจากนี้มันยัง config ได้อีกเยอะเลย เช่น

rules: {
  username: {
    required: true,
    minlength: 5,
    remote: check.php
  },
  email: {
    required: true,
    email: true,
  },
  emailconfirm: {
    equalTo: ‘#email’
  }
},
messages: {
  username: {
    required: ‘Error’,
    remote: ‘This username is already use’
  }
}

แบบนี้จะเป็นการ ระบุ validate แบบเต็มๆ รวมทั้งแก้ default message บางตัวด้วย ยังไง ตรงนี้ผมขอฝากให้อ่าน manual เอาเองละกัน มันค่อนข้างจะเยอะ จริงๆ

HTML:

<form method="post" name="demo" id="demo" action="#">
<fieldset>
        <legend>jQueryTips Demo</legend>
        <table>
        <tr>
                <th>Name</th>
                <td><input type="text" name="name" id="cname" value="" class="txt" /></td>
                <td class="form-message"></td>
        </tr>
        <tr>
                <th>Gender</th>
                <td>
                        <label><input type="radio" name="gender" value="1" /> Male</label>
                        <label><input type="radio" name="gender" value="2" /> Female</label>
                </td>
                <td class="form-message"></td>
        </tr>
        <tr>
                <td></td>
                <td colspan="2"><input type="submit" value="Submit" /></td>
        </tr>
        </table>
</fieldset>
</form>

ส่วนนี่เป็นตัว อย่าง HTML ครับ

และเพื่อไม่ให้เสียเวลา และสร้างความเข้าใจมากขึ้น ผมได้เขียนตัวอย่างขึ้นมาไฟล์นึง พร้อมทั้งให้ Download ไปลองแกะกันดู ที่นี่ครับ

Sample

คิดว่าหลังจากได้ดูตัวอย่างและลอง view source ก็น่าจะเข้าใจได้ไม่ยากครับ แต่ว่าลูกเล่น ของ plugin ตัวนี้ นี่มีอีกเพียบเลย ครับ ยังไง ลอง ดูที่ Official Site เอาเลย