Frontend Academy · บทเรียน

แอตทริบิวต์ตรวจสอบความถูกต้องของฟอร์ม

ใช้แอตทริบิวต์ required, minlength, maxlength, pattern, min, max และ step และจัดรูปแบบสถานะการตรวจสอบด้วยคลาสเทียม :valid กับ :invalid

แอตทริบิวต์ตรวจสอบความถูกต้องของฟอร์ม เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

การตรวจสอบในเบราว์เซอร์แบบเนทีฟ

HTML5 มีการตรวจสอบแบบฟอร์มในตัวผ่านแอตทริบิวต์ เมื่อส่งแบบฟอร์ม เบราว์เซอร์จะตรวจสอบแต่ละช่อง หากการตรวจสอบไม่ผ่าน เบราว์เซอร์จะแสดงคำแนะนำข้อผิดพลาดแบบเนทีฟและป้องกันการส่งข้อมูล โดยไม่ต้องใช้ JavaScript สำหรับกรณีพื้นฐาน

required

การเพิ่ม required ให้กับช่องป้อนข้อมูล รายการเลือก หรือพื้นที่ข้อความ จะทำให้ช่องนั้นเป็นช่องบังคับ เบราว์เซอร์จะแสดงข้อผิดพลาดหากช่องว่างเมื่อมีการส่งแบบฟอร์ม

<input type="text" name="name" required>
<select name="plan" required>
  <option value="">Choose plan...</option>
  <option value="free">Free</option>
</select>

minlength และ maxlength

minlength บังคับให้มีจำนวนอักขระอย่างน้อยตามที่กำหนด maxlength ป้องกันไม่ให้ป้อนข้อมูลเกินจำนวนสูงสุด คุณสามารถใช้ทั้งสองอย่างร่วมกันเพื่อบังคับความซับซ้อนของรหัสผ่านหรือจำกัดความยาวความคิดเห็น

<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>

min, max และ step สำหรับช่องป้อนข้อมูลตัวเลข

min และ max กำหนดช่วงค่าที่ถูกต้องสำหรับช่องป้อนข้อมูลตัวเลขและวันที่ step กำหนดค่าการเพิ่มทีละขั้น ซึ่งมีประโยชน์สำหรับช่วงค่า (เช่น 5%) ความละเอียดทศนิยม หรือวันที่เท่านั้น

<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">

pattern — การตรวจสอบด้วยนิพจน์ทั่วไป

pattern รับนิพจน์ทั่วไปของ JavaScript ช่องป้อนข้อมูลต้องตรงกับรูปแบบจึงจะส่งแบบฟอร์มได้ ใส่ title เพื่ออธิบายรูปแบบที่คาดหวังในคำแนะนำข้อผิดพลาดของเบราว์เซอร์

<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
  title="Enter a valid UK postcode (e.g. SW1A 1AA)">

<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">

novalidate — การปิดการตรวจสอบแบบเนทีฟ

เพิ่ม novalidate ให้กับองค์ประกอบ <form> เพื่อปิดการตรวจสอบแบบเนทีฟของเบราว์เซอร์ทั้งหมด ควรทำเช่นนี้เมื่อคุณนำการตรวจสอบด้วย JavaScript แบบกำหนดเองมาใช้ เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่สอดคล้องกัน

<form novalidate id="signup">
  <!-- custom validation in JS -->
</form>

การตรวจสอบความถูกต้องใน JavaScript

API การตรวจสอบข้อจำกัดช่วยให้คุณตรวจสอบความถูกต้องผ่านโปรแกรมได้: input.validity (ออบเจ็กต์ ValidityState), input.checkValidity() (ส่งคืนค่าบูลีน) และ input.setCustomValidity(message) (กำหนดข้อผิดพลาดแบบกำหนดเอง)

const email = document.querySelector('#email');
if (!email.checkValidity()) {
  console.log(email.validationMessage); // browser's error text
  console.log(email.validity.valueMissing); // true if empty
  console.log(email.validity.typeMismatch); // true if not email format
}

setCustomValidity

เรียกใช้ setCustomValidity(message) พร้อมสตริงที่ไม่ว่าง เพื่อทำเครื่องหมายว่าช่องป้อนข้อมูลไม่ถูกต้องพร้อมข้อความกำหนดเอง เรียกใช้พร้อมสตริงว่างเพื่อล้างข้อผิดพลาด วิธีนี้มีประโยชน์กับช่องข้อมูลที่ตรวจสอบโดยเซิร์ฟเวอร์ เช่น การตรวจสอบว่า username ไม่ซ้ำกัน

const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
  username.setCustomValidity('This username is already taken.');
} else {
  username.setCustomValidity(''); // valid
}

:valid และ :invalid คลาสเทียม

จัดรูปแบบช่องป้อนข้อมูลที่ถูกต้องและไม่ถูกต้องด้วยคลาสเทียมของ CSS โปรดระวัง: ช่องป้อนข้อมูลจะเป็น :invalid ก่อนที่ผู้ใช้จะโต้ตอบกับช่องนั้น ใช้ :user-invalid (เบราว์เซอร์รุ่นใหม่) หรือ JavaScript เพื่อเพิ่มคลาส “touched” ก่อน

/* Modern approach */
input:user-invalid {
  border-color: #e53e3e;
}
input:user-valid {
  border-color: #38a169;
}

/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }

ข้อความข้อผิดพลาดแบบกำหนดเองด้วย reportValidity

form.reportValidity() จะแสดงส่วนติดต่อการตรวจสอบความถูกต้องแบบเนทีฟของเบราว์เซอร์สำหรับทุกช่องข้อมูล โปรดใช้หลังจากกำหนดข้อความตรวจสอบแบบกำหนดเองแล้ว เพื่อแสดงข้อความเหล่านั้นแก่ผู้ใช้โดยไม่ต้องรอเหตุการณ์การส่งแบบฟอร์ม

รูปแบบการแสดงข้อผิดพลาดที่เข้าถึงได้

แสดงข้อผิดพลาดในบรรทัดโดยใช้: 1) aria-invalid="true" บนช่องป้อนข้อมูล 2) ย่อหน้าข้อผิดพลาดที่มองเห็นได้และเชื่อมโยงด้วย aria-describedby และ 3) ย้ายโฟกัสไปยังช่องข้อมูลแรกที่ไม่ถูกต้อง วิธีนี้รองรับผู้ใช้ทุกคน รวมถึงผู้ใช้โปรแกรมอ่านหน้าจอ

ตรวจสอบอย่างรวดเร็ว

แอตทริบิวต์ใดจำกัดช่องป้อนข้อความให้มี อักขระได้ไม่เกิน 280 ตัว

ทบทวน: แอตทริบิวต์การตรวจสอบแบบฟอร์ม

required, minlength/maxlength, min/max/step และ pattern ล้วนมีการตรวจสอบความถูกต้องแบบเนทีฟของเบราว์เซอร์ให้โดยอัตโนมัติ ใช้ novalidate เมื่อใช้งานการตรวจสอบด้วย JS แบบกำหนดเอง API การตรวจสอบข้อจำกัดช่วยให้ JavaScript เข้าถึงสถานะความถูกต้องได้ จัดรูปแบบข้อผิดพลาดด้วย :user-invalid หลังจากผู้ใช้โต้ตอบกับช่องข้อมูลแล้ว

คำถามที่พบบ่อย

บทเรียน “แอตทริบิวต์ตรวจสอบความถูกต้องของฟอร์ม” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “แอตทริบิวต์ตรวจสอบความถูกต้องของฟอร์ม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “แอตทริบิวต์ตรวจสอบความถูกต้องของฟอร์ม”

ใช้แอตทริบิวต์ required, minlength, maxlength, pattern, min, max และ step และจัดรูปแบบสถานะการตรวจสอบด้วยคลาสเทียม :valid กับ :invalid คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “แอตทริบิวต์ตรวจสอบความถูกต้องของฟอร์ม” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

ตัวควบคุมฟอร์ม: ชนิด input select textarea
ARIA และการเข้าถึง: label role aria-*
HTML5 เชิงความหมาย: เชิงความหมายเทียบกับ div ที่ปะปน
แอตทริบิวต์ตรวจสอบความถูกต้องของฟอร์ม

← กลับไปที่ Frontend Academy