Validating URLs

ถ้าถามใครว่า การตรวจสอบ URL ที่ถูกต้องทำอย่างไร เราจะได้คำตอบที่ไม่เหมือนกัน ขึ้นอยู่กับว่าเราถามใคร ซึ่งมันจะมีผลกับชนิดของ input ที่ browser ต้องการ URL prefix เราก็สามารถตั้งชื่อได้เอง เช่น http:// หรือ bonk:// browser ก็จะประมวลผลได้เหมือนกัน เพียงแต่เราต้องมีตัวอักษรและ colon แต่ห้ามมี วรรคระหว่างตัวอักษร ลองใช้ดูที่ Live Preview Validator เราไม่สามารถตรวจสอบ url input ได้ทั้งหมด แต่อย่างน้อยเราควรมี เผื่อว่าในอนาคตจะต้อง validation อีก

<form>
	<input type="url" required />
	<input type="submit" value="Submit Now!">
</form>

โชคดีที่เราสามารถปรับปรุง url validation input type ได้โดยการใช้ตัวแปร pattern ซึ่งตัวแปร pattern จะใช้ JavaScript Regular Expression ถ้าเราไม่มีความรู้เกี่ยวกับ regular expression สิ่งที่ควรจะรู้คือ เพิ่มตัวแปรตามนี้ที่ช่องกรอกข้อมูล pattern="https?://.+" validation จะตรวจว่า url ที่กรอกเข้าไปต้องเริ่มต้นด้วย http:// หรือ https://

<form>
	<input type="url" pattern="https?://.+" required />
	<input type="submit" value="Submit Now!">
</form>