Polyfills for form validation

จากที่ได้กล่าวไปในบท validation ต้นๆว่า browser ไม่สามารถรองรับได้ทุก feature ของ HTML5 เพราะฉะนั้นจะต้องเอา polyfill มาช่วยในการพัฒนา website

h5validate by Eric Leads (h5validate โดย Eric Leads)

Eric Leads ได้พัฒนา polyfill ที่รองรับ the required attribute (ตัวแปรที่จำเป็นและรูปแบบที่จำเป็น) ที่จะมาใช้งานกับ IE9, 8, 7, 6, Chrome, Firefox, Safari, และ Opera, ในส่วนของ mobile platform ก็จะมี iPhone, Android, และ Palm WebOs

Step-by-step Guide (วิธีการใช้)

• ขั้นแรกต้อง download the polyfill
• Upload JavaScript, jquery.h5validate.js ไปที่ webserver ของเรา
• Copy and Paste โค้ดด้านล่างทุกหน้าของ page ที่ใช้ HTML5 (เช็คที่ path ของ jquery.h5validate.js อีกทีว่าถูกต้องไหม)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.h5validate.js"></script>

<script>
$(document).ready(function () {
    $('form').h5Validate();
});
</script>

Script element แถวแรกเป็นการ load JavaScript library ชื่อ jQuery Script element แถวที่ 2 เป็นการ load h5validate polyfill Script element แถวสุดท้ายเป็นการเชื่อมต่อระหว่าง polyfill กับโค้ด form element ของเรา

ถึงจุดนี้ เราสามารถใช้ required (ตัวแปร required) และ pattern (ตัวแปร pattern) ในทุก platform ที่กล่าวข้างต้น ข้อพึงระวังในการใช้ตัวแปร pattern คือ เราต้องกำหนด pattern เช่น โดยการใช้ validate email addresses หรือ validate date

Html5widgets by Zoltan Hawryluk (Html5widgets โดย Zoltan Hawryluk)

Zoltan Hawryluk ได้พัฒนา polyfill ที่ขั้นแรกจะตรวจสอบก่อนว่า browser นั้นรองรับ HTML5 หรือยัง ถ้ายัง ก็จะนำ html5widget มาใช้

Zoltan ได้เขียนวิธีการใช้ html5widgets polyfill และ วิธีการ install ในนี้ Zoltan have written a great step-by-step tutorial ด้านล่างเป็นรายชื่อของ html5widget feature

• Form validation โดยการใช้ ตัวแปร required และตัวแปร pattern
• ตัวแปร autofocus
• ตัวแปร placeholder
• ขอบเขตของ input type และ output tag
• วันที่และเวลา (datetime); วันที่,เวลา, และสถานที่ (datetime-local); วันที่ (date); อาทิตย์ (week); week input type
• Color input type