Link

Parsley.js – Javascript forms validation. Powerful, UX aware & Dead simple.

Parsley.js – Javascript forms validation. Powerful, UX aware & Dead simple.

เป็น form validate ที่น่าสนใจทีเดียว วิธีใช้นั้นง่ายกว่า jQuery form validate ตั้งเยอะ

Example: validate with no js code !!

<form id="demo-form" data-validate="parsley">
    <label for="fullname">Full Name * :</label>
    <input type="text" id="fullname" name="fullname" data-required="true" />

    <label for="email">Email * :</label>
    <input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />

    <label for="website">Website :</label>
    <input type="text" id="website" name="website" data-trigger="change" data-type="url" />

    <label for="message">Message (20 chars min, 200 max) :</label>
    <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>
</form>

idea เหมือนกับ validate form ที่เราเคยเขียน คือ กำหนดพวก pattern ใน html attribute
ซึ่งใน parsleyjs จะใช้

data-required – เพื่อบอกว่า field นี้ required นะ
data-trigger – กำหนด action ในการทำ validate
data-type – กำหนดประเภทของข้อมูลในการทำ validate
data-rangelength – กำหนดขอบเขตของอักขระที่ทำ validate

นอกจากนี้แล้วยังมี i18n ด้วย😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s