繼昨天的部分，來實作表單的一些驗證功能。

HTML的補全

• 表單加上id
  
• 為餐前、餐後血糖加上範圍限制
  
• 在 <input type="date"> 裡面加 required
  

script.js完整程式碼

document.addEventListener("DOMContentLoaded", function () {
    // ====== 找元素 ======
    const exerciseRadios = document.querySelectorAll('input[name="exercise"]');
    const exerciseDetail = document.getElementById("exercise_detail");

    const medRadios = document.querySelectorAll('input[name="medication"]');
    const medicationDetail = document.getElementById("medication_detail");

    const form = document.querySelector("form");
    const dateInput = document.getElementById("date");
    const weightInput = document.getElementById("weight");
    const bfGlucoseInput = document.getElementById("bf_glucose");
    const afGlucoseInput = document.getElementById("af_glucose");

    // ====== 功能1：radio 顯示/隱藏 ======
    function safeToggle(detailEl, shouldShow) {
        if (!detailEl) return;
        if (shouldShow) {
            detailEl.classList.remove("hidden");
            detailEl.disabled = false; // 啟用輸入
        } else {
            detailEl.classList.add("hidden");
            detailEl.value = ""; // 清空
            detailEl.disabled = true; // 禁用
        }
    }

    function handleRadioGroupChange(radios, detailEl) {
        if (!radios || radios.length === 0) return;
        radios.forEach(radio => {
            radio.addEventListener("change", function () {
                const checked = document.querySelector(`input[name="${radio.name}"]:checked`);
                const value = checked ? checked.value : null;
                safeToggle(detailEl, value === "yes");
            });
        });
        const initiallyChecked = document.querySelector(`input[name="${radios[0].name}"]:checked`);
        safeToggle(detailEl, initiallyChecked && initiallyChecked.value === "yes");
    }

    handleRadioGroupChange(exerciseRadios, exerciseDetail);
    handleRadioGroupChange(medRadios, medicationDetail);

    // ====== 功能2：表單驗證 ======
    form.addEventListener("submit", function (event) {
        const date = dateInput.value;
        const weight = parseFloat(weightInput.value);
        const bfGlucose = parseFloat(bfGlucoseInput.value);
        const afGlucose = parseFloat(afGlucoseInput.value);

        // 日期必填
        if (!date) {
            alert("日期不能空白！");
            event.preventDefault();
            return;
        }

        // 體重要大於 0
        if (isNaN(weight) || weight <= 0) {
            alert("請輸入正確的體重（大於 0）");
            event.preventDefault();
            return;
        }

        // 餐前血糖必須是數字
        if (isNaN(bfGlucose)) {
            alert("請輸入正確的餐前血糖數值");
            event.preventDefault();
            return;
        }

        // 餐後血糖必須是數字
        if (isNaN(afGlucose)) {
            alert("請輸入正確的餐後血糖數值");
            event.preventDefault();
            return;
        }
    });
});

成果展示

• 沒有填寫日期時
  

• 體重輸入小於0時
  

• 血糖值要介於 50~400 間