JS 表單驗證：判斷文本框是否為空的正確寫法

常見錯誤

原代碼中 if (cname==\"\") 雖語法正確，但若輸入框包含空白字元，仍視為非空。且程式碼混雜 PHP、HTML、JS，結構混亂，難以維護。

正確判斷非空的兩種方式

1. 判斷長度：if (cname.trim().length === 0) —— 去除首尾空白後檢查長度。
2. 嚴格比較：if (cname === \"\" || cname === null) —— 適用於未 trim 的情況。

最佳實踐建議

• 將 JS 驗證邏輯獨立為模組，避免內嵌於 HTML。
• 使用 addEventListener('submit', handler) 綁定提交事件，而非 onsubmit 屬性。
• 善用 HTML5 內建驗證：<input required>、pattern 屬性。
• 伺服器端（PHP）務必二次驗證，前端驗證僅為使用者體驗。

重構示例

// 獨立 JS 檔案
function validateForm(form) {
    const requiredFields = ['cname', 'tname', 'pname', 'paim', 'pcontent', 'pstep', 'presult', 'panalyse'];
    for (const id of requiredFields) {
        const el = form.elements[id];
        if (!el.value.trim()) {
            alert('請填寫所有必填欄位');
            el.focus();
            return false;
        }
    }
    return true;
}
document.getElementById('myForm').addEventListener('submit', e => {
    if (!validateForm(e.target)) e.preventDefault();
});