HTML Academy · บทเรียน

reportValidity และ setCustomValidity

เรียกใช้ส่วนติดต่อการตรวจสอบของเบราว์เซอร์และกำหนดข้อความข้อผิดพลาดเอง

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

ส่วนเชื่อมต่อสองรายการสำหรับประสบการณ์ผู้ใช้ในตัว

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

reportValidity เทียบกับ checkValidity

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

document.forms.signup.addEventListener("submit", (e) => {
  if (!e.target.reportValidity()) {
    e.preventDefault();
    // browser already focused first invalid field and showed tooltip
  }
});

การตรวจสอบด้วยโปรแกรม

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

setCustomValidity แทนที่ข้อความ

ข้อความเริ่มต้น ("โปรดกรอกข้อมูลในช่องนี้") อาจไม่ตรงกับน้ำเสียงที่คุณต้องการ input.setCustomValidity("Username is required") จะแทนที่ข้อความเริ่มต้นด้วยข้อความของคุณ ช่องรับข้อมูลจะถูกถือว่าไม่ถูกต้องจนกว่าคุณจะล้างข้อความ

การล้างข้อความกำหนดเอง

input.setCustomValidity("") จะลบข้อความที่กำหนดเองและเปิดใช้การตรวจสอบตามปกติอีกครั้ง เรียกใช้ทุกครั้งที่ตรวจสอบความถูกต้องใหม่ มิฉะนั้นข้อความกำหนดเองเก่าจะยังคงอยู่แม้ผู้ใช้แก้ไขปัญหาแล้ว

input.addEventListener("input", () => {
  if (input.value.length < 3) {
    input.setCustomValidity("Must be at least 3 characters");
  } else {
    input.setCustomValidity("");
  }
});

การตรวจสอบแบบอะซิงโครนัส

สำหรับการตรวจสอบฝั่งเซิร์ฟเวอร์ (เช่น ความไม่ซ้ำกันของชื่อผู้ใช้หรือความถูกต้องของคูปอง) ให้ใช้ setCustomValidity หลังได้รับผลลัพธ์แบบอะซิงโครนัส: const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken"); เบราว์เซอร์จะรับรู้สถานะความถูกต้องใหม่ทันที

จับคู่กับส่วนติดต่อข้อผิดพลาดกำหนดเอง

หากต้องการใช้การแสดงข้อผิดพลาดของคุณเองพร้อมกับยังคงติดตามสถานะความถูกต้อง ให้รับฟังเหตุการณ์ invalid และเรียกใช้ e.preventDefault() เพื่อปิดคำแนะนำแบบป๊อปอัปดั้งเดิม: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); })

ข้อจำกัดกำหนดเองหลายรายการ

setCustomValidity รองรับข้อความกำหนดเองได้ครั้งละหนึ่งข้อความเท่านั้น หากต้องการบังคับใช้กฎหลายข้อ ให้ตรวจสอบแต่ละข้อและเรียก setCustomValidity พร้อมข้อความที่เกี่ยวข้องที่สุดตามลำดับความสำคัญ ระบบจะแสดงกฎแรกที่ไม่ผ่าน

อย่าซ้ำซ้อนกับข้อจำกัดในตัว

หากคุณกำหนดข้อความเองสำหรับช่องบังคับที่ว่างอยู่ ข้อความของคุณอาจขัดแย้งกับข้อความเริ่มต้น เลือกแนวทางเดียวต่อช่อง: ปิดใช้ข้อจำกัดในตัว (ใช้ type="text" แทน type="email" แล้วตรวจสอบผ่าน setCustomValidity) หรือไว้วางใจข้อจำกัดในตัวทั้งหมด

การตรวจสอบความถูกต้องระดับแบบฟอร์ม

สำหรับการตรวจสอบที่เกี่ยวข้องกันระหว่างหลายช่อง (เช่น การยืนยันรหัสผ่านให้ตรงกัน) ให้ใช้ setCustomValidity กับช่องที่เกี่ยวข้อง: confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match") แบบฟอร์มจะไม่ถูกต้องจนกว่าค่าทั้งสองจะตรงกัน

การรองรับหลายภาษา

เบราว์เซอร์จะแปลข้อความในตัวตามภาษาของผู้ใช้ ขณะที่ข้อความกำหนดเองที่ตั้งค่าผ่าน setCustomValidity คุณต้องจัดเตรียมให้เป็นภาษาที่ถูกต้องเอง อ่าน navigator.language หรือสถานะการรองรับหลายภาษาของคุณ แล้วส่งคำแปลที่ตรงกัน

การทดสอบ

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

ตรวจสอบความรู้

หลังจากเรียกใช้ input.setCustomValidity("Already taken") แล้ว คุณจะบอกเบราว์เซอร์ได้อย่างไรว่าช่องรับข้อมูลถูกต้องอีกครั้ง

สรุป

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

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

บทเรียน “reportValidity และ setCustomValidity” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “reportValidity และ setCustomValidity”

เรียกใช้ส่วนติดต่อการตรวจสอบของเบราว์เซอร์และกำหนดข้อความข้อผิดพลาดเอง คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “reportValidity และ setCustomValidity” ใช้เวลานานแค่ไหน

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

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

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

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

FormData API
Constraint Validation API
reportValidity และ setCustomValidity
เหตุการณ์รีเซ็ตแบบฟอร์มและการจัดการสถานะ

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