当用户选择“Others specify…”选项但未填写对应文本框，提交后因验证失败返回页面时，该文本框会意外隐藏；本文介绍如何结合 Laravel 的 old() 和 $errors 辅助函数，在服务端动态控制 CSS display 属性，确保错误状态下文本框始终可见。
当用户选择“others specify…”选项但未填写对应文本框，提交后因验证失败返回页面时，该文本框会意外隐藏；本文介绍如何结合 laravel 的 `old()` 和 `$errors` 辅助函数，在服务端动态控制 css `display` 属性，确保错误状态下文本框始终可见。
在 Laravel 表单中，前端 JavaScript 的 onchange 事件（如 selectOption()）仅在用户交互时触发，而表单验证失败后重渲染页面时并不会自动执行该逻辑——这导致原本应显示的 <textarea></textarea> 因缺少 JS 初始化而被隐藏。根本解法是将显隐逻辑从客户端迁移至服务端渲染层，利用 Blade 模板引擎根据 old('b3') 值和验证错误状态，直接输出正确的内联样式。
关键在于：只要用户此前选择了 "3"（即“Others specify…”），或 b4 字段存在验证错误（如为空），就不添加 style="display: none"，从而保证 <div id="specify"> 始终可见。<p>以下是优化后的完整代码（含必要修正）：</p><pre class="brush:php;toolbar:false;"><form method="POST" action="{{ route('employer-section-b.store') }}">
@csrf
<div class="col-md-12">
<select name="b3" id="sector" class="form-control{{ $errors->has('b3') ? ' is-invalid' : '' }}" onchange="selectOption();">
<option value="" disabled selected>select</option>
<option value="1"{{ old('b3') == '1' ? ' selected' : '' }}>Agriculture, forestry, and fishing</option>
<option value="2"{{ old('b3') == '2' ? ' selected' : '' }}>Mining and quarrying</option>
<option value="3"{{ old('b3') == '3' ? ' selected' : '' }}>Others specify……</option>
</select>
{{-- 注意：textarea 使用独立字段名 b4，避免与 select 冲突 --}}
<div class="col-md-12 mt-2" id="specify"
{!! ($errors->has('b4') || old('b3') == '3') ? '' : 'style="display: none;"' !!}>
<div class="form-floating mb-3">
<textarea rows="2"
name="b4"
class="form-control{{ $errors->has('b4') ? ' is-invalid' : '' }}"
placeholder="Type here...">{{ old('b4', '') }}</textarea>
@error('b4')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
</div>
</form></pre><p>配套的 JavaScript 可精简为仅处理纯前端交互（非必需，但建议保留以提升 UX）：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill7885" title="laravel-specialist"><img
src="https://img.php.cn/upload/skill/000/000/081/179172020840450.jpg" alt="laravel-specialist" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill7885" title="laravel-specialist">laravel-specialist</a>
<p>精通 Laravel 10+，遵循现代 PHP 实践的 Laravel 专家。擅长优雅语法、Eloquent ORM、队列系统及企业级特性...</p>
</div>
<a href="/xiazai/skill7885" title="laravel-specialist" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><pre class="brush:php;toolbar:false;"><script>
function selectOption() {
const sector = document.getElementById('sector').value;
const specifyDiv = document.getElementById('specify');
if (sector == '3') {
specifyDiv.style.display = 'block';
} else {
specifyDiv.style.display = 'none';
}
}
// 页面加载时也执行一次，确保初始状态正确（尤其当 old('b3')=='3' 但 JS 未触发时）
document.addEventListener('DOMContentLoaded', selectOption);
</script></pre><p>⚠️ <strong>重要注意事项</strong>：</p>
<ul>
<li>
<strong>字段命名必须唯一</strong>：原代码中 <code>select 和 textarea 同用 name="b3" 会导致后端无法区分选中值与补充文本，必须将 textarea 改为 name="b4"，并在控制器验证规则中单独校验 b4（例如：'b4' => 'required_if:b3,3|string|max:500'）；
old() 值类型需一致：HTML 中 value="3" 是字符串，因此判断应为 old('b3') == '3' 而非 == 3；aria-hidden="true/false" 或 aria-expanded 属性配合屏幕阅读器。通过将状态判定逻辑前置到模板渲染阶段，我们消除了对客户端事件触发的依赖，使表单在验证往返（round-trip）后依然保持语义清晰、交互一致——这是构建健壮 Laravel 表单的最佳实践之一。
