Spring Boot+Thymeleaf中JS实现下拉框关联文本框必填功能

下面给你完整的Thymeleaf表单示例，搭配JavaScript逻辑实现需求：

Thymeleaf 表单代码 #

<form id="myForm" th:action="@{/submit}" method="post">
    <!-- 下拉框 -->
    <div>
        <label for="classOverridden">是否覆盖类:</label>
        <select id="classOverridden" name="classOverridden" class="form-control">
            <option value="">请选择</option>
            <option value="yes">是</option>
            <option value="no">否</option>
        </select>
    </div>

    <!-- 需要联动的文本框 -->
    <div>
        <label for="classOverriddenComment">备注:</label>
        <input type="text" id="classOverriddenComment" name="classOverriddenComment" class="form-control">
    </div>

    <button type="submit" class="btn btn-primary">提交</button>
</form>

JavaScript 逻辑代码 #

把这段代码放在页面的<script>标签里（建议放在</body>之前，确保DOM元素已加载完成）：

// 获取页面元素
const classOverridden = document.getElementById('classOverridden');
const classOverriddenComment = document.getElementById('classOverriddenComment');
const form = document.getElementById('myForm');

// 监听下拉框选择变化
classOverridden.addEventListener('change', function() {
    // 选中非默认选项时，设置文本框为必填
    if (this.value !== '') {
        classOverriddenComment.required = true;
        // 可选：添加样式提示用户这是必填项（用Bootstrap的is-invalid类，没用到框架可以自定义CSS）
        classOverriddenComment.classList.add('is-invalid');
    } else {
        // 未选中有效选项时，移除必填属性
        classOverriddenComment.required = false;
        classOverriddenComment.classList.remove('is-invalid');
        // 可选：清空文本框内容
        classOverriddenComment.value = '';
    }
});

// 表单提交时兜底验证
form.addEventListener('submit', function(e) {
    // 如果下拉框选了选项，但文本框为空
    if (classOverridden.value !== '' && classOverriddenComment.value.trim() === '') {
        // 阻止表单提交
        e.preventDefault();
        alert('请填写备注信息');
        // 聚焦到文本框，方便用户输入
        classOverriddenComment.focus();
    }
});

关键说明 #

• 联动核心逻辑：通过change事件监听下拉框的选择状态，动态给文本框添加/移除required属性，浏览器会自动识别该属性，在提交时做基础非空检查。
• 兜底验证：额外添加表单提交监听是为了防止浏览器默认验证被绕过，确保逻辑严谨性。
• 样式提示：示例中使用的is-invalid是Bootstrap框架的样式类，会给文本框添加红色边框；如果没使用Bootstrap，你可以自己写CSS样式来标记必填状态。

内容的提问来源于stack exchange，提问作者Syed Iftekharuddin