UI Pattern

ช่องเดียวเอาอยู่

UI ที่ผมกำลังจะแนะนำนี้เป็นความพยายามของมนุษยชาติที่ต้องการเอาชนะการกรอกฟอร์มที่ยุ่งยากเยอะแยะแสนจะทรมาน เมื่อต้องกรอกข้อมูลบัตรเครดิตเพื่อชำระเงิน ด้วย UI นี้ เราต้องการเพียงช่องกรอกข้อมูลเพียงช่องเดียวเท่านั้นเอง เคล็ดลับของการทำงานของช่องกรอกข้อมูลอันเดียวนี้ (single-field credit card input) คือการแบ่งขั้นตอนการตรวจสอบข้อมูลออกเป็นขั้นตอนย่อยๆ ซึ่งเราต้องกรอกข้อมูลเลขบัตรเครดิตให้ถูกต้องเสียก่อน จึงจะสามารถกรอกข้อมูลอื่นต่อไปได้ เช่น เลขหลังบัตร CVC, วันหมดอายุ เป็นต้น ช่องกรอกข้อมูลนี้จึงทำงานเสมือน real-time validator ...