ฟอร์มขั้นสูงและการตรวจสอบแบบเนทีฟ

ใช้ประโยชน์จาก required, pattern, inputmode และ Constraint Validation API เพื่อฟอร์มที่แข็งแรงโดยไม่ต้องใช้ไลบรารีภายนอกใด ๆ

10 นาที · 3 คำถาม

เบราว์เซอร์มาพร้อมเครื่องมือตรวจสอบที่ครบครัน ซึ่งหลายทีมมักเขียนขึ้นใหม่ด้วย JavaScript ตามความเคยชิน ส่วนประกอบมีดังนี้: required (ฟิลด์บังคับ), ชนิด (email, url, date) ที่ตรวจสอบรูปแบบ, minlength/maxlength, min/max/step สำหรับค่าตัวเลข และ pattern ที่รับนิพจน์ปกติ (regular expression) รายละเอียดสำคัญ: pattern ถูกยึดปลายโดยปริยาย - ค่าทั้งหมดต้องตรงกัน ราวกับว่า regex ถูกห่อด้วย ^ และ $ เพิ่ม autocomplete ด้วยค่ามาตรฐาน (postal-code, email, tel) มันเป็นทั้ง UX และการเข้าถึง

<label for="zip">Postal code</label>
<input id="zip" name="zip" type="text"
       required pattern="[0-9]{5}"
       inputmode="numeric"
       autocomplete="postal-code">

แอตทริบิวต์ inputmode มักถูกเข้าใจผิด: มันไม่ตรวจสอบอะไรเลย มันแค่บอกระบบมือถือว่าจะแสดงคีย์บอร์ดเสมือนแบบใด (numeric, tel, email, decimal, search) นั่นคือเหตุผลที่การผสม type="text" + inputmode="numeric" + pattern เป็นแนวทางที่แนะนำสำหรับรหัสตัวเลข: คุณได้คีย์บอร์ดที่ถูกต้องโดยไม่ต้องรับเอาพฤติกรรมของ type="number" มาด้วย

input:user-invalid {
  border: 2px solid #b3261e;
}
input:user-valid {
  border: 2px solid #1b5e20;
}

ในฝั่ง CSS ให้เลือก :user-invalid แทน :invalid: ตัวหลังจะทำงานทันทีที่หน้าโหลด ทำให้ฟิลด์ที่ผู้ใช้ยังไม่ได้แตะกลายเป็นสีแดง ในฝั่ง JavaScript, Constraint Validation API เติมเต็มชุดเครื่องมือ: checkValidity() เรียกการตรวจสอบ, อ็อบเจกต์ validity เปิดเผยสาเหตุที่แน่นอน (patternMismatch, valueMissing, tooShort) และ setCustomValidity() ให้คุณแทนที่ข้อความทั่วไปของเบราว์เซอร์ด้วยข้อความของคุณเอง

const zip = document.querySelector("#zip");
zip.addEventListener("input", () => {
  if (zip.validity.patternMismatch) {
    zip.setCustomValidity("Enter 5 digits.");
  } else {
    zip.setCustomValidity("");
  }
});

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. inputmode="numeric" ทำอะไรกันแน่?
   • ปฏิเสธข้อมูลที่ไม่ใช่ตัวเลขทุกอย่าง
   • แปลงค่าของฟิลด์ให้เป็นตัวเลข
   • แนะนำคีย์บอร์ดตัวเลขบนมือถือ โดยไม่ตรวจสอบอะไรเลย
2. ด้วย pattern="[0-9]{5}" ค่า "abc12345" จะถูกยอมรับหรือไม่?
   • ใช่ เพราะมันมีเลข 5 หลักติดกันอยู่จริง
   • ไม่ เพราะ pattern กำหนดให้ค่าทั้งหมดต้องตรงกัน
   • ใช่ ถ้าฟิลด์นั้นไม่ได้เป็น required
3. ทำไมจึงเลือก :user-invalid แทน :invalid ในการจัดสไตล์ข้อผิดพลาด?
   • :user-invalid จะทำงานหลังจากผู้ใช้โต้ตอบแล้วเท่านั้น
   • :invalid ไม่ได้รับการรองรับโดยเบราว์เซอร์รุ่นใหม่
   • :user-invalid ยังตรวจสอบฟิลด์ที่ปิดใช้งานด้วย