JSP 下拉框聯動驗證：根據選項動態控制文本框必填邏輯

需求描述

JSP 頁面包含下拉框（選項 1-5）與文本框。需求：選擇選項 1 時，文本框必填；其他選項則非必填。需在前端即時驗證。

完整實作範例

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>下拉框聯動驗證範例</title>
</head>
<body>
    <form method="post" onsubmit="return validateForm(this)">
        <label>選項：
            <select name="tp" id="tp" onchange="toggleRequired()">
                <option value="1">選項 1 (必填)</option>
                <option value="2">選項 2</option>
                <option value="3">選項 3</option>
                <option value="4">選項 4</option>
                <option value="5">選項 5</option>
            </select>
        </label>
        <br><br>
        <label>輸入框：
            <input type="text" name="un" id="un" />
            <span id="unError" style="color:red; display:none;">選項 1 時必填！</span>
        </label>
        <br><br>
        <input type="submit" value="提交" />
    </form>

    <script>
        // 頁面載入時初始化
        window.onload = function() {
            toggleRequired();
        };

        // 根據下拉框值切換必填狀態
        function toggleRequired() {
            var select = document.getElementById("tp");
            var input = document.getElementById("un");
            var error = document.getElementById("unError");
            
            if (select.value === "1") {
                input.required = true;
                error.style.display = "inline";
            } else {
                input.required = false;
                error.style.display = "none";
            }
        }

        // 表單提交驗證
        function validateForm(form) {
            var select = form.tp;
            var input = form.un;
            
            if (select.value === "1" && !input.value.trim()) {
                alert("請輸入必填欄位！");
                input.focus();
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

關鍵技術點

1. 動態修改 required 屬性

input.required = true;  // HTML5 原生驗證
input.required = false;

2. 即時視覺回饋

透過 onchange 事件顯示/隱藏錯誤提示，提升用戶體驗。

3. 雙重驗證機制

後端驗證範例

@PostMapping("/submit")
public String submit(@RequestParam("tp") String tp, 
                     @RequestParam("un") String un) {
    if ("1".equals(tp) && (un == null || un.trim().isEmpty())) {
        // 返回錯誤或拋出異常
        return "error";
    }
    // 業務邏輯...
    return "success";
}

進階擴展：多欄位聯動

function toggleRequired() {
    var val = document.getElementById("tp").value;
    var fields = {
        "1": ["un", "txt"],
        "2": ["email"],
        "3": []
    };
    
    // 先重置所有
    document.querySelectorAll("input[data-dynamic-required]").forEach(function(input) {
        input.required = false;
        document.getElementById(input.id + "Error").style.display = "none";
    });
    
    // 再啟用對應欄位
    (fields[val] || []).forEach(function(fieldId) {
        var input = document.getElementById(fieldId);
        input.required = true;
        document.getElementById(fieldId + "Error").style.display = "inline";
    });
}

總結

核心在於：onchange 事件動態切換 required 屬性與視覺提示，配合 onsubmit 進行最終攔截。記住前端驗證只為體驗，後端驗證才是安全底線。