How HTML5 validation works

หลักการพื้นฐานของการ validation ใน HTML5 คือ เราต้องบอก browser ว่า ข้อมูลช่องไหนที่เราต้องการจะตรวจสอบ การจะ validation นั้นต้องขึ้นอยู่กับ ชนิดของข้อมูลในช่องนั้น

มี browser บางอันที่ไม่สามารถ validation แบบนี้ได้ แต่ไม่ต้องกังวล ถ้า browser ไม่สามารถตรวจสอบได้ว่าเป็นข้อมูลชนิดไหน browser จะประมวลผลว่าเป็นช่องข้อมูลตัวอักษรธรรมดา ในตัวอย่างจะแสดงให้เห็นว่า browser จะประมวลผลออกมาแบบเดียวกัน

<form>
	<input type="text" /> <br />
	<input type="my-weird-value" /> <br />
	<input />  <br />
	<input type="submit" value="Submit now" />
</form>

เมื่อ browser ไม่สามารถตรวจสอบได้ว่าเป็นข้อมูลชนิดไหน และถึงแม้ว่า browser จะประมวลผลว่าเป็นช่องข้อมูลตัวอักษรธรรมดา และประมวลผลออกมาแบบเดียวกัน เราก็ยังควรจะใช้ การ validation ใน HTML5 แบบใหม่

Example - the required attribute (ตัวอย่างของตัวแปรที่เราต้องการ)

สมมติว่าเรามี ช่องกรอกข้อมูลที่ห้ามมีอักษรที่เว้นว่างไว้ เราจะใช้ตัวแปรชื่อ required ใน HTML5 เมื่อเราใช้ตัวแปร required เราไม่จำเป็นต้องเขียนโค้ดยาวๆ

<form>
	<input type="text" required="required" /><br />
	<input type="submit" value="Submit now" />
</form>

เราสามารถเขียนได้โดย

<form>
	<input type="text" required /><br />
	<input type="submit" value="Submit now" />
</form>

เมื่อเราใช้ตัวแปร required จะทำให้ browser รู้ว่า เราต้องกรอกข้อมูลในช่องก่อนกดส่ง ตัวแปร required จะไม่รู้ว่าเป็นข้อมูลชนิดไหน แต่จะรู้ได้เมื่อเราใช้ตัวแปรอื่นซึ่งจะกล่าวถึงในบทต่อๆไป