驗證時遇到問題<select>一個更大的元素<form>element - 它不會返回錯誤消息

Question

我一直在構建一系列允許動態數據操作 (CRUD) 的網頁。 這些頁面是用 HTML、CSS 和 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>

在這個階段，當用戶沒有從下拉列表中選擇任何東西時，不會返回任何錯誤消息——這也是項目這個階段的目標。

到目前為止我試圖解決問題的步驟（這些沒有用）

我嘗試更改主要 foreach 語句中的邏輯。

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>

我被告知“遍歷選項元素”可能是一個可能的解決方案，但我不知道如何實現這一點。

我的目標是顯示錯誤消息“請選擇路線類型”。 如果用戶沒有從下拉菜單中選擇任何內容，則返回。

非常感謝您的幫助！

Answer 1

您需要一個具有空值和required的選項字段。

1. 帶有客戶端檢查的解決方案

<select name="route-type" id="route-type" required="required">
 <option value="">What type of route is this?</option>
 <option value="A" >Select A</option>
 <option value="B" >Select B</option>
</select>

你不需要 php。

嘗試在不選擇值的情況下提交此內容，您將收到一條錯誤消息。

所有 html 和 javascript 檢查都只是好東西，當您從表單中獲取它們時，您總是必須使用 php（當您使用 php 時）檢查所有值。

永遠不要相信任何數據並檢查您收到的每一個數據！

更新：

也許這是您使用 php 尋找的可能解決方案：

2. 使用 php 檢查的解決方案

<?php
 
   $route_check = array(
        'interstate'
       ,'stateRoute'
    );
    
    if(!in_array($_POST['route_type'] ?? '' , $route_check)){

?>

<form method="post">
    <select name="route_type">
        <option value="">SELECT A TYPE</option>
        <option value="interstate">interstate</option>
        <option value="stateRoute">stateRoute</option>
    </select>
    <input type="submit">
</form>

<?php

    }
    else{
        echo "DO SOMETHING";
    }
?>

如果您不想在客戶端使用所需的選項進行檢查：

<select name="route_type" required="required">

您還可以使用循環構建選項字段並使用數組中的值。

3. 使用 php 檢查和自定義錯誤消息（javascript 警報）的解決方案：

<?php
 
   $route_check = array(
        'interstate'
       ,'stateRoute'
    );
    
    if(!in_array($_POST['route_type'] ?? '' , $route_check)){
      if( ($_POST['SEND'] ?? '') === 'SEND'){
        echo "<script>alert('Please select type')</script>";
       }
?>

<form method="post">
    <select name="route_type">
        <option value="">SELECT A TYPE</option>
        <option value="interstate">interstate</option>
        <option value="stateRoute">stateRoute</option>
    </select>
    <input type="submit" name="SEND" value="SEND">
</form>

<?php

    }
    else{
        echo "DO SOMETHING";
    }
?>

4. 使用 php 檢查和自定義錯誤消息的解決方案（選項字段中的 php）：

<?php
 
   $route_check = array(
        'interstate'
       ,'stateRoute'
    );
    
    if(!in_array($_POST['route_type'] ?? '' , $route_check)){
      if( ($_POST['SEND'] ?? '') === 'SEND'){
        $MESSAGE = 'NO TYPE SELECTED';
       }
       else{
       $MESSAGE = 'SELECT A TYPE';
      }
?>

<form method="post">
    <select name="route_type">
        <option value=""><?php echo $MESSAGE; ?></option>
        <option value="interstate">interstate</option>
        <option value="stateRoute">stateRoute</option>
    </select>
    <input type="submit" name="SEND" value="SEND">
</form>

<?php

    }
    else{
        echo "DO SOMETHING";
    }
?>

這只是它如何工作的一個小例子，當然您可以進一步優化和調整代碼