TIP : การใช้ HTML5 Validation ตามรูปแบบที่กำหนด แทนการใช้ javascript

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: TIP : การใช้ HTML5 Validation ตามรูปแบบที่กำหนด แทนการใช้ javascript

Re: HTML5 Validation ตามรูปแบบที่กำหนด แทนการใช้ javascript

โดย konseo » 20/11/2015 11:03 pm

ต้องนำไปใช้บ้างล่ะ น่าสนใจครับตัวนี้

TIP : การใช้ HTML5 Validation ตามรูปแบบที่กำหนด แทนการใช้ javascript

โดย M031 » 20/11/2015 1:34 pm

*** สำหรับการดัก validation ของ HTML5 ต้องประกอบไปด้วย tag form, required, pattern, title
required = attributes ที่ต้องใส่ลงไปใร tag input
pattern = รูปแบบตัวอักษรหรือตัวเลขหรืออักษรพิเศษ ที่เราต้องการจะกำหนด
title = เปรียบเสมือนข้อความที่แจ้งเตือนหลังจากที่ กรอกข้อมูลผิดรูปแบบที่กำหนด

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML5 Validation</title>
</head>
<body>
	<form action="" method="post">
		<table>
			<tr>
				<td>Name </td>
				<td><input type="text" placeholder="Name" required pattern="[a-zA-Zก-ุฯ-๙\s]*" title="กรุณากรอกตัวอักษร"></td>
			</tr>
			<tr>
				<td>LastName </td>
				<td><input type="text" placeholder="lasrName" required pattern="[a-zA-Zก-ุฯ-๙\s]*" title="กรุณากรอกตัวอักษร"></td>
			</tr>
			<tr>
				<td>Telephone</td>
				<td><input type="text" placeholder="lasrName" required pattern="[0-9\s]*" title="กรุณากรอกตัวเลข"></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" name="btnsave" value="Save"></td>
			</tr>
		</table>
	</form>
</body>
</html>
สามารถศึกษาเพิ่มเติ่มได้ที่
http://www.w3schools.com/html/html_form_attributes.asp

ลิ้งที่เกี่ยวข้อง
https://www.mindphp.com/%E0%B8%9A%E0%B8% ... html5.html

ข้างบน