PHP表单内select元素验证无法返回错误消息的问题求助

我正在搭建一套基于HTML、CSS、PHP实现的支持动态CRUD操作的网页，当前阶段目标是实现表单校验功能：用户未填写/选择特定字段数据时，页面返回对应错误提示，目前我已经为该问题搭建了测试沙盒。

现有实现代码 #

页面顶部PHP初始化与校验逻辑 #

我在页面顶部编写了如下PHP代码，用于初始化变量、定义表单提交后的响应规则：

$routeType = "";
$hasRouteType = false;
$routeTypeError = false;

if( isset($_POST["add"]) ) {

   if( isset($_POST['route-type']) ) {
      $routeType = $_POST['route-type'];

      if($routeType) {
         $hasRouteType = true;
      } else {
         $routeTypeError = "Please select a route type.";
      }
   }
}

表单下拉菜单代码 #

表单内的下拉菜单实现代码如下：

<form method='POST'>
    <field>
        <label>Route Type</label>
        <select name="route-type" id="route-type">

            <option value="" selected="true" disabled="disabled">What type of route is this?</option>
            <option value="interstate">Interstate</option>
            <option value="stateRoute">State Route</option>

            <?php if($routeTypeError) { ?>
                <p class='error'><?=$routeTypeError?></p>

            <?php } ?>
        </select>
    </field>
<form>

<button class='route-button' type="submit" name='add'>Add route</button>

故障现象 #

用户未选择下拉菜单任何选项直接提交表单时，页面不会返回预期的错误提示，不符合开发要求。

已尝试的无效方案 #

• 修改核心判断逻辑，将有效值判定条件改为$routeType != ""，测试代码片段如下：

if($routeType) {
$hasRouteType = true;

if($routeType != "") {
 $hasRouteType = true;

• 调整初始化阶段$routeType变量的数据类型
• 为下拉菜单首项添加selected="true"与disabled="disabled"属性，将其设为页面加载时的默认展示占位项，同时禁止用户选中该无效选项，对应代码：

<option value="" selected="true" disabled="disabled">What type of route is this?</option>

我收到建议称“遍历option元素”可能是可行解法，但不清楚具体实现方式。
我的开发目标为：用户未选择下拉菜单任何选项提交表单时，页面返回错误提示Please select a route type.。

你的代码存在3个直接导致功能失效的问题，按以下修改即可实现预期效果：

1. 表单标签闭合错误：你写了两个<form>开始标签，缺少</form>闭合标签，导致提交按钮不在表单作用域内，提交时表单数据无法正常传递。
2. 错误提示DOM位置错误：<select>标签内部仅允许放置<option>、<optgroup>标签，你把错误提示的<p>标签写在<select>内部，浏览器会自动忽略该非法嵌套的元素，即使后端返回了错误文本也无法渲染。
3. 校验逻辑存在漏洞：现有逻辑仅处理了route-type字段存在的场景，没有覆盖字段未提交的边界情况，且缺少合法值白名单校验，容易被非法参数绕过。

修正后的完整代码 #

PHP校验逻辑部分 #

$routeType = "";
$hasRouteType = false;
$routeTypeError = false;

if( isset($_POST["add"]) ) {
    // 提交表单后统一校验字段
    if( isset($_POST['route-type']) && trim($_POST['route-type']) !== "" ) {
        $routeType = trim($_POST['route-type']);
        // 增加白名单校验，防止提交非法参数
        $validTypes = ["interstate", "stateRoute"];
        if(in_array($routeType, $validTypes)){
            $hasRouteType = true;
        } else {
            $routeTypeError = "Please select a route type.";
        }
    } else {
        $routeTypeError = "Please select a route type.";
    }
}

表单部分代码 #

<form method='POST'>
    <div class="field">
        <label>Route Type</label>
        <select name="route-type" id="route-type">
            <option value="" selected disabled>What type of route is this?</option>
            <option value="interstate" <?php if($routeType === "interstate") echo "selected"; ?>>Interstate</option>
            <option value="stateRoute" <?php if($routeType === "stateRoute") echo "selected"; ?>>State Route</option>
        </select>
        <!-- 错误提示移到select标签外部 -->
        <?php if($routeTypeError) { ?>
            <p class='error'><?php echo $routeTypeError; ?></p>
        <?php } ?>
    </div>
    <!-- 按钮放到form标签内部，正确闭合表单标签 -->
    <button class='route-button' type="submit" name='add'>Add route</button>
</form>

关于“遍历option元素”的说明 #

该思路属于前端JavaScript校验方案，可以在用户提交前提前拦截无效请求、减少后端交互，和PHP后端校验不冲突，不能用前端校验替代后端校验。如果需要加前端校验，可将以下代码放到页面底部：

const form = document.querySelector('form');
const routeSelect = document.getElementById('route-type');
form.addEventListener('submit', function(e){
    // 清除旧的错误提示
    const oldError = document.querySelector('.error');
    if(oldError) oldError.remove();
    // 校验选中值
    if(routeSelect.value === ""){
        e.preventDefault();
        const errorTip = document.createElement('p');
        errorTip.className = 'error';
        errorTip.textContent = "Please select a route type.";
        routeSelect.after(errorTip);
    }
})

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