สร้างกล่องข้อความ (Text Input) พร้อมการตรวจสอบข้อมูล

สวัสดีครับผู้เรียนทุกท่าน! ยินดีต้อนรับเข้าสู่บทเรียนที่ 3 ของชุด "สร้าง UI Components พื้นฐาน" ในบทเรียนนี้ เราจะก้าวไปอีกขั้นจากการสร้างปุ่มแบบกำหนดเองในบทที่แล้ว มาสู่การสร้างส่วนประกอบ UI ที่สำคัญและใช้งานบ่อยมาก นั่นคือ กล่องข้อความ (Text Input) พร้อมกับความสามารถในการ ตรวจสอบข้อมูล (Data Validation)

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

ในบทความนี้ เราจะเรียนรู้ตั้งแต่การสร้างโครงสร้าง HTML พื้นฐานของกล่องข้อความ, การตกแต่งด้วย CSS ให้สวยงามและบ่งบอกสถานะ, ไปจนถึงการเขียน JavaScript เพื่อตรวจสอบข้อมูลแบบเรียลไทม์ และให้ Feedback ที่ชัดเจนแก่ผู้ใช้งาน เราจะเน้นที่ความเข้าใจหลักการและลงมือปฏิบัติไปพร้อมกันครับ

ทำไมการตรวจสอบข้อมูล (Validation) จึงสำคัญ?

ก่อนที่เราจะเริ่มลงมือสร้าง ลองมาทำความเข้าใจถึงความสำคัญของการตรวจสอบข้อมูลกันก่อนครับ

ป้องกันข้อผิดพลาด: ช่วยให้ผู้ใช้ป้อนข้อมูลได้อย่างถูกต้อง ลดโอกาสเกิดข้อผิดพลาด เช่น ลืมกรอกข้อมูล, กรอกรูปแบบที่ไม่ถูกต้อง (เช่น อีเมลไม่มี @), หรือรหัสผ่านสั้นเกินไป
ปรับปรุงประสบการณ์ผู้ใช้ (UX): การแจ้งเตือนที่ชัดเจนและทันท่วงทีช่วยให้ผู้ใช้แก้ไขข้อมูลได้ทันที ไม่ต้องรอจนกระทั่งกดปุ่มส่งข้อมูลแล้วพบข้อผิดพลาดทีหลัง
เพิ่มความปลอดภัย: แม้ว่าการตรวจสอบข้อมูลบนฝั่ง Client-side (ในเบราว์เซอร์) จะไม่สามารถทดแทนการตรวจสอบบนฝั่ง Server-side ได้ทั้งหมด แต่ก็ช่วยกรองข้อมูลที่ไม่พึงประสงค์ออกไปได้ในระดับหนึ่ง
ลดภาระของ Server: การตรวจสอบเบื้องต้นบนฝั่ง Client-side ช่วยลดจำนวน request ที่มีข้อมูลไม่ถูกต้องส่งไปยัง Server ทำให้ Server ทำงานได้อย่างมีประสิทธิภาพมากขึ้น

เอาล่ะ! เมื่อเข้าใจความสำคัญแล้ว เรามาเริ่มลงมือสร้างกันเลยดีกว่าครับ

1. โครงสร้าง HTML สำหรับกล่องข้อความ (Text Input HTML Structure)

เราจะเริ่มต้นด้วยโครงสร้าง HTML พื้นฐานของกล่องข้อความ การสร้างกล่องข้อความที่ดีไม่ได้มีแค่แท็ก <input> เพียงอย่างเดียว แต่ยังรวมถึงแท็กอื่นๆ ที่ช่วยเรื่องความเข้าใจและการเข้าถึง (Accessibility) ด้วย

องค์ประกอบสำคัญ:

<label>: แท็กนี้ใช้สำหรับเชื่อมโยงกับ <input> เพื่อบอกผู้ใช้ว่ากล่องข้อความนี้มีไว้สำหรับกรอกข้อมูลอะไร การใช้ <label> ที่ถูกต้องจะช่วยให้ผู้ใช้ที่ใช้โปรแกรมอ่านหน้าจอ (Screen Reader) หรือผู้ที่ใช้อุปกรณ์ป้อนข้อมูลอื่นๆ เข้าใจได้ง่ายขึ้น
- ควรมีแอตทริบิวต์ for ที่มีค่าตรงกับ id ของ <input> ที่ต้องการเชื่อมโยง
<input type="text">: นี่คือแท็กหลักสำหรับกล่องข้อความ
- id: เป็นตัวระบุที่ไม่ซ้ำกัน ใช้สำหรับเชื่อมโยงกับ <label> และใช้ใน JavaScript เพื่อเข้าถึงองค์ประกอบนี้
- name: ใช้ระบุชื่อของ input เมื่อมีการส่งฟอร์มไปยังเซิร์ฟเวอร์
- placeholder: ข้อความตัวอย่างที่จะแสดงในกล่องข้อความก่อนที่ผู้ใช้จะป้อนข้อมูล
- aria-describedby: แอตทริบิวต์สำหรับช่วยเรื่องการเข้าถึง (Accessibility) โดยจะเชื่อมโยงกับ ID ขององค์ประกอบที่ให้คำอธิบายเพิ่มเติม เช่น ข้อความแจ้งเตือนข้อผิดพลาด
<span> หรือ <p> สำหรับข้อความแจ้งเตือน: เราจะใช้แท็กนี้เพื่อแสดงข้อความแจ้งเตือนเมื่อข้อมูลที่ผู้ใช้ป้อนไม่ถูกต้อง
- ควรมี id เพื่อให้ JavaScript สามารถเข้าถึงและอัปเดตข้อความได้
- ควรมีแอตทริบิวต์ aria-live="assertive" เพื่อให้โปรแกรมอ่านหน้าจอแจ้งเตือนผู้ใช้ทันทีเมื่อข้อความนี้มีการเปลี่ยนแปลง
<div> สำหรับจัดกลุ่ม: การห่อหุ้ม <label>, <input>, และข้อความแจ้งเตือนไว้ใน <div> เดียวกัน จะช่วยให้เราจัดกลุ่มและจัดแต่งสไตล์ได้ง่ายขึ้น

ตัวอย่างโค้ด HTML พื้นฐาน:

เราจะลองสร้างกล่องข้อความสำหรับกรอก "ชื่อผู้ใช้งาน" (Username) กันครับ

<!-- index.html -->
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>กล่องข้อความพร้อมตรวจสอบข้อมูล</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>สร้างชื่อผู้ใช้งาน</h2>
        
        <div class="input-group">
            <label for="username">ชื่อผู้ใช้งาน:</label>
            <input 
                type="text" 
                id="username" 
                name="username" 
                placeholder="กรอกชื่อผู้ใช้งานของคุณ" 
                aria-describedby="username-error" 
                aria-invalid="false" 
            />
            <span id="username-error" class="error-message" aria-live="assertive"></span>
        </div>

        <button type="submit" id="submitBtn">บันทึก</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

จากโค้ดด้านบน:

เรามี <div class="input-group"> เพื่อห่อหุ้มองค์ประกอบที่เกี่ยวข้อง
<label for="username"> ถูกเชื่อมโยงกับ <input id="username">
<input> มี aria-describedby="username-error" เพื่อบอกว่าข้อความแจ้งเตือนจะอยู่ใน <span id="username-error"> นี้
aria-invalid="false" จะใช้ JavaScript ในการเปลี่ยนเป็น "true" เมื่อข้อมูลไม่ถูกต้อง
<span id="username-error" class="error-message" aria-live="assertive"></span> เป็นที่สำหรับแสดงข้อความผิดพลาด

2. การจัดแต่งด้วย CSS (Styling with CSS)

หลังจากได้โครงสร้าง HTML แล้ว เรามาเพิ่มความสวยงามและการบ่งบอกสถานะด้วย CSS กันครับ เราจะกำหนดสไตล์พื้นฐาน สไตล์เมื่อผู้ใช้โฟกัส และสไตล์เมื่อข้อมูลไม่ถูกต้อง

ตัวอย่างโค้ด CSS:

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* เปลี่ยนเป็น flex-start เพื่อให้เนื้อหาอยู่ด้านบน */
    min-height: 100vh;
    margin: 0;
    padding-top: 50px; /* เพิ่มระยะห่างด้านบน */
}

.container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

h2 {
    color: #333;
    text-align: center;
    margin-bottom: 25px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 600;
}

.input-group input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box; /* สำคัญมากเพื่อให้ padding ไม่ดันขนาดออกไป */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-group input[type="text"]::placeholder {
    color: #aaa;
}

/* สไตล์เมื่อ input ถูกโฟกัส */
.input-group input[type="text"]:focus {
    outline: none; /* ลบเส้นกรอบสีน้ำเงินเริ่มต้นของเบราว์เซอร์ */
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* สไตล์สำหรับข้อความแจ้งเตือนข้อผิดพลาด */
.error-message {
    color: #dc3545; /* สีแดงสำหรับข้อผิดพลาด */
    font-size: 0.875rem;
    margin-top: 5px;
    display: none; /* ซ่อนไว้ก่อน จะแสดงเมื่อมีข้อผิดพลาด */
}

/* สไตล์สำหรับ input ที่มีข้อผิดพลาด */
.input-group input[type="text"].is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

/* สไตล์สำหรับ input ที่ถูกต้อง */
.input-group input[type="text"].is-valid {
    border-color: #28a745; /* สีเขียวสำหรับข้อมูลที่ถูกต้อง */
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}

/* ปุ่มบันทึก */
#submitBtn {
    width: 100%;
    padding: 12px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    margin-top: 15px;
}

#submitBtn:hover:not(:disabled) {
    background-color: #0056b3;
}

#submitBtn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.7;
}

ในโค้ด CSS นี้ เราได้ทำสิ่งต่างๆ ดังนี้:

สไตล์พื้นฐาน: กำหนด font-family, background-color, และจัดกึ่งกลาง .container
.input-group: ใช้สำหรับจัดระยะห่างระหว่างกลุ่ม input
label: ทำให้เป็นบล็อก (display: block;) เพื่อให้ label อยู่เหนือ input และมีระยะห่างด้านล่าง
input[type="text"]: กำหนด width: 100%;, padding, border, border-radius และ box-sizing: border-box; เพื่อให้ขนาดรวมของ input ไม่เกิน 100% ของ parent
:focus: กำหนดสไตล์เมื่อ input ถูกโฟกัส เพื่อให้ผู้ใช้รู้ว่ากำลังกรอกข้อมูลอยู่ที่กล่องไหน
.error-message: กำหนดสีแดงและซ่อนไว้ (display: none;) โดยจะแสดงเมื่อ JavaScript ตรวจพบข้อผิดพลาด
.is-invalid และ .is-valid: เป็นคลาสที่เราจะใช้ JavaScript ในการเพิ่มหรือลบ เพื่อเปลี่ยนสไตล์ของ input ให้เป็นสีแดง (ไม่ถูกต้อง) หรือสีเขียว (ถูกต้อง)
#submitBtn: กำหนดสไตล์สำหรับปุ่มบันทึก และสไตล์สำหรับสถานะ :disabled ซึ่งเราจะใช้ JavaScript ในการควบคุม

3. การเพิ่มตรรกะด้วย JavaScript (Adding Logic with JavaScript)

มาถึงส่วนที่น่าตื่นเต้นที่สุด นั่นคือการเพิ่มตรรกะการตรวจสอบข้อมูลด้วย JavaScript ครับ เราจะทำการตรวจสอบเมื่อผู้ใช้เริ่มพิมพ์ข้อมูลและเมื่อออกจากช่องกรอกข้อมูล

ขั้นตอนการทำงานของ JavaScript:

เข้าถึงองค์ประกอบ DOM: ดึงอ้างอิงถึง input, label และ error message span
กำหนดกฎการตรวจสอบ: เช่น ห้ามว่างเปล่า, ความยาวขั้นต่ำ/สูงสุด
เพิ่ม Event Listener:
- 'input' event: ตรวจสอบข้อมูลแบบเรียลไทม์ขณะที่ผู้ใช้พิมพ์
- 'blur' event: ตรวจสอบเมื่อผู้ใช้ออกจากช่องกรอกข้อมูล (คลายโฟกัส)
ฟังก์ชันตรวจสอบข้อมูล: สร้างฟังก์ชันที่รับค่าจาก input และใช้กฎที่เรากำหนด
ให้ Feedback: เมื่อตรวจสอบแล้ว ให้แสดง/ซ่อนข้อความแจ้งเตือน และเปลี่ยนสไตล์ของ input
ควบคุมปุ่ม: เปิด/ปิดการใช้งานปุ่ม "บันทึก" ตามสถานะการตรวจสอบข้อมูล

ตัวอย่างโค้ด JavaScript:

สร้างไฟล์ script.js และเพิ่มโค้ดด้านล่างนี้:

// script.js

// 1. เข้าถึงองค์ประกอบ DOM ที่จำเป็น
const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('username-error');
const submitButton = document.getElementById('submitBtn');

// ตัวแปรสำหรับเก็บสถานะความถูกต้องของแต่ละ input
// ในบทนี้เรามีแค่ username แต่ถ้ามีหลาย input ก็จะมีหลายตัวแปร
let isUsernameValid = false;

// 2. ฟังก์ชันสำหรับตรวจสอบชื่อผู้ใช้งาน
function validateUsername() {
    const usernameValue = usernameInput.value.trim(); // .trim() ใช้ตัดช่องว่างหน้า-หลัง

    // เงื่อนไขการตรวจสอบ:
    // 1. ห้ามว่างเปล่า
    // 2. ความยาวต้องอยู่ระหว่าง 3 ถึง 15 ตัวอักษร
    if (usernameValue === '') {
        displayError('ชื่อผู้ใช้งานห้ามว่างเปล่า', usernameInput, usernameError);
        isUsernameValid = false;
    } else if (usernameValue.length < 3) {
        displayError('ชื่อผู้ใช้งานต้องมีอย่างน้อย 3 ตัวอักษร', usernameInput, usernameError);
        isUsernameValid = false;
    } else if (usernameValue.length > 15) {
        displayError('ชื่อผู้ใช้งานต้องไม่เกิน 15 ตัวอักษร', usernameInput, usernameError);
        isUsernameValid = false;
    } else {
        clearError(usernameInput, usernameError);
        isUsernameValid = true;
    }

    // อัปเดตสถานะของปุ่ม submit
    updateSubmitButtonState();
}

// ฟังก์ชันแสดงข้อผิดพลาด
function displayError(message, inputElement, errorElement) {
    errorElement.textContent = message; // กำหนดข้อความผิดพลาด
    errorElement.style.display = 'block'; // แสดงข้อความผิดพลาด
    inputElement.classList.add('is-invalid'); // เพิ่มคลาสสำหรับสไตล์ไม่ถูกต้อง
    inputElement.classList.remove('is-valid'); // ลบคลาสสไตล์ถูกต้อง
    inputElement.setAttribute('aria-invalid', 'true'); // สำหรับ Accessibility
}

// ฟังก์ชันล้างข้อผิดพลาด
function clearError(inputElement, errorElement) {
    errorElement.textContent = ''; // ล้างข้อความผิดพลาด
    errorElement.style.display = 'none'; // ซ่อนข้อความผิดพลาด
    inputElement.classList.remove('is-invalid'); // ลบคลาสสไตล์ไม่ถูกต้อง
    inputElement.classList.add('is-valid'); // เพิ่มคลาสสไตล์ถูกต้อง
    inputElement.setAttribute('aria-invalid', 'false'); // สำหรับ Accessibility
}

// ฟังก์ชันอัปเดตสถานะของปุ่ม Submit
function updateSubmitButtonState() {
    // ปุ่มจะใช้งานได้ก็ต่อเมื่อ input ทุกตัวถูกต้อง
    if (isUsernameValid) {
        submitButton.disabled = false;
    } else {
        submitButton.disabled = true;
    }
}

// 3. เพิ่ม Event Listener ให้กับ input
// 'input' event: ตรวจสอบทุกครั้งที่ผู้ใช้พิมพ์
usernameInput.addEventListener('input', validateUsername);

// 'blur' event: ตรวจสอบเมื่อผู้ใช้ออกจากช่องกรอกข้อมูล
usernameInput.addEventListener('blur', validateUsername);

// เพิ่ม Event Listener ให้กับปุ่ม submit (ตัวอย่าง)
submitButton.addEventListener('click', (event) => {
    event.preventDefault(); // ป้องกันการ submit ฟอร์มจริง (ถ้าอยู่ใน form)
    if (isUsernameValid) {
        alert('ชื่อผู้ใช้งานถูกต้องและพร้อมใช้งาน!');
        // ตรงนี้สามารถส่งข้อมูลไปยัง Server หรือทำอย่างอื่นต่อได้
    } else {
        alert('กรุณาแก้ไขข้อมูลให้ถูกต้องก่อนบันทึก');
    }
});

// กำหนดสถานะเริ่มต้นของปุ่มเมื่อโหลดหน้าเว็บ
updateSubmitButtonState();

คำอธิบายโค้ด JavaScript:

การเข้าถึงองค์ประกอบ: เราใช้ document.getElementById() เพื่อเข้าถึงกล่องข้อความ, ข้อความแจ้งเตือน และปุ่มบันทึก
isUsernameValid: ตัวแปร Boolean ที่ใช้ติดตามสถานะความถูกต้องของชื่อผู้ใช้งาน
validateUsername(): ฟังก์ชันหลักในการตรวจสอบ
- ดึงค่าจาก usernameInput และใช้ .trim() เพื่อลบช่องว่างที่อาจมีอยู่หน้าและหลังข้อความ
- ใช้เงื่อนไข if-else if-else เพื่อตรวจสอบ:
  - usernameValue === '': ตรวจสอบว่าว่างเปล่าหรือไม่
  - usernameValue.length < 3: ตรวจสอบความยาวขั้นต่ำ
  - usernameValue.length > 15: ตรวจสอบความยาวสูงสุด
- เรียกใช้ displayError() หรือ clearError() ตามผลลัพธ์การตรวจสอบ
- อัปเดต isUsernameValid
- เรียก updateSubmitButtonState() เพื่ออัปเดตสถานะปุ่ม
displayError(): ฟังก์ชันที่รับข้อความ, input element และ error element เพื่อ:
- ตั้งค่า textContent ของ error element
- ตั้งค่า display: 'block' เพื่อแสดงข้อความ
- เพิ่มคลาส .is-invalid ให้ input และลบ .is-valid
- ตั้งค่า aria-invalid="true"
clearError(): ฟังก์ชันที่ทำตรงกันข้ามกับ displayError() เพื่อซ่อนข้อความผิดพลาดและเปลี่ยนสไตล์ input เป็นปกติหรือถูกต้อง
updateSubmitButtonState(): ฟังก์ชันที่ตรวจสอบ isUsernameValid (และถ้ามี input อื่นๆ ก็จะตรวจสอบตัวแปรสถานะของ input เหล่านั้นด้วย) เพื่อเปิดหรือปิดการใช้งานปุ่ม submitButton
Event Listeners:
- usernameInput.addEventListener('input', validateUsername);: ทำให้เกิดการตรวจสอบทันทีที่ผู้ใช้พิมพ์ตัวอักษร
- usernameInput.addEventListener('blur', validateUsername);: ทำให้เกิดการตรวจสอบเมื่อผู้ใช้คลิกออกจากช่องกรอกข้อมูล
- submitButton.addEventListener('click', ...): เป็นตัวอย่างการตอบสนองเมื่อผู้ใช้กดปุ่มบันทึก (เราใช้ event.preventDefault() เพื่อไม่ให้ฟอร์มส่งข้อมูลจริง และแสดง alert แทน)
สถานะเริ่มต้น: เราเรียก updateSubmitButtonState() หนึ่งครั้งเมื่อโหลดหน้าเว็บ เพื่อให้ปุ่มถูกปิดการใช้งานตั้งแต่แรก (เนื่องจากช่องกรอกข้อมูลยังว่างเปล่า)

4. การปรับปรุงประสบการณ์ผู้ใช้และการเข้าถึง (UX & Accessibility Improvements)

นอกจากฟังก์ชันการทำงานแล้ว การคำนึงถึงประสบการณ์ผู้ใช้และการเข้าถึงก็เป็นสิ่งสำคัญที่เราควรใส่ใจในการสร้าง UI Components ครับ

Feedback ที่ชัดเจน: การเปลี่ยนสีของขอบ input, การแสดงข้อความผิดพลาดที่เข้าใจง่าย และการใช้ icon (ซึ่งเรายังไม่ได้ทำในบทนี้ แต่สามารถทำเพิ่มได้) ช่วยให้ผู้ใช้เข้าใจสถานะได้ทันที
การตรวจสอบแบบเรียลไทม์: การตรวจสอบขณะพิมพ์ (input event) ช่วยให้ผู้ใช้แก้ไขข้อผิดพลาดได้เร็ว ไม่ต้องรอจนกรอกเสร็จ
aria-invalid: แอตทริบิวต์นี้จะบอกโปรแกรมอ่านหน้าจอว่า input นั้นมีข้อมูลไม่ถูกต้องหรือไม่
aria-describedby: แอตทริบิวต์นี้จะเชื่อมโยง input กับองค์ประกอบที่ให้คำอธิบายหรือข้อความผิดพลาด ทำให้โปรแกรมอ่านหน้าจออ่านข้อความผิดพลาดให้ผู้ใช้ฟังได้
aria-live="assertive": เมื่อข้อความใน <span class="error-message"> เปลี่ยนแปลง โปรแกรมอ่านหน้าจอจะแจ้งเตือนผู้ใช้ทันทีโดยไม่ชักช้า

ข้อควรพิจารณาเพิ่มเติม (สำหรับผู้ที่ต้องการต่อยอด):

การตรวจสอบรูปแบบที่ซับซ้อน (Regular Expressions): สำหรับการตรวจสอบอีเมล, เบอร์โทรศัพท์, หรือรหัสผ่านที่มีเงื่อนไขเฉพาะ (เช่น ต้องมีตัวพิมพ์ใหญ่, ตัวเลข, อักขระพิเศษ) คุณสามารถใช้ Regular Expressions (Regex) ใน JavaScript ได้ เช่น /^\S+@\S+\.\S+$/.test(emailValue) สำหรับอีเมล
การผสานรวมกับ Form: หากคุณมี <form> คุณสามารถเพิ่ม Event Listener ให้กับ form ด้วย 'submit' event และเรียกฟังก์ชัน validateUsername() (และฟังก์ชัน validate อื่นๆ) อีกครั้งก่อนที่จะส่งข้อมูลจริง
การจัดกลุ่ม Input: สำหรับฟอร์มที่มีหลาย input คุณอาจสร้างฟังก์ชัน validateAllInputs() เพื่อตรวจสอบทุกช่องพร้อมกัน และอัปเดตสถานะของปุ่ม Submit
Debouncing/Throttling: สำหรับการตรวจสอบแบบเรียลไทม์ที่ซับซ้อน การใช้ Debouncing หรือ Throttling อาจช่วยลดจำนวนครั้งที่ฟังก์ชันตรวจสอบถูกเรียกใช้ ทำให้ประสิทธิภาพดีขึ้น

สรุป

ในบทเรียนนี้ เราได้เรียนรู้วิธีการสร้างกล่องข้อความ (Text Input) ที่ไม่ได้มีแค่ความสวยงาม แต่ยังฉลาดพอที่จะตรวจสอบข้อมูลที่ผู้ใช้ป้อนเข้ามา และให้ Feedback ที่เข้าใจง่าย ซึ่งเป็นสิ่งสำคัญอย่างยิ่งในการสร้าง User Interface ที่ดี

เราเริ่มต้นด้วยการสร้าง โครงสร้าง HTML ที่แข็งแรง โดยใช้ <label>, <input> และ <span> สำหรับข้อความผิดพลาด พร้อมทั้งเพิ่มแอตทริบิวต์ aria-* เพื่อการเข้าถึง
จากนั้น เราใช้ CSS ในการจัดแต่งสไตล์พื้นฐาน, สไตล์เมื่อโฟกัส, และสไตล์สำหรับสถานะ .is-invalid และ .is-valid เพื่อให้ผู้ใช้เห็นสถานะของข้อมูลได้ชัดเจน
สุดท้าย เราได้เพิ่ม JavaScript เพื่อจัดการกับตรรกะการตรวจสอบข้อมูลแบบเรียลไทม์ (input event), เมื่อผู้ใช้ออกจากช่องกรอกข้อมูล (blur event), และควบคุมสถานะของปุ่ม Submit

ความสามารถในการสร้างกล่องข้อความพร้อมการตรวจสอบข้อมูลนี้เป็นทักษะพื้นฐานที่สำคัญมากในการพัฒนาเว็บ คุณสามารถนำหลักการเหล่านี้ไปประยุกต์ใช้กับการสร้างกล่องข้อความประเภทอื่นๆ เช่น อีเมล, รหัสผ่าน หรือตัวเลขได้

ในบทเรียนถัดไป "สร้างแถบเลื่อน (Slider) แบบง่าย" เราจะไปสำรวจวิธีการสร้าง UI Component อีกรูปแบบหนึ่งที่น่าสนใจและมีการโต้ตอบกับผู้ใช้ที่แตกต่างออกไป เตรียมตัวให้พร้อมสำหรับการเรียนรู้สิ่งใหม่ๆ กันได้เลยครับ!