Having trouble validating the <select> element within a larger <form> element - it won’t return an error message

Question

I've been building a series of webpages that allows for dynamic data manipulation (CRUD). The pages are built with HTML, CSS, and PHP. At this stage of the project, my goal is to have the site return an error message if data is not entered into a particular field. I've made a small sandbox for the problem.

At the top of the page, I included the following PHP logic to outline the variables and how the page will behave if data is entered into the form fields (or not entered):

$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.";
      }
   }
}

I made a dropdown menu as one of the elements in the form as follows:

<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>

At this stage, when the user doesn't choose anything from the dropdown, no error message is returned -- again, this is the goal of this stage of the project.

Steps I've tried to solve the problem so far (these didn't work)

I've tried changing the logic in the principal foreach statement.

if($routeType) {
$hasRouteType = true;

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

I've tried changing the data type of the $routeType variable when it's initialized.

I've tried adding selected=“true” and disabled=“disabled” to the top element in the dropdown menu to make it the first thing that appears on the page — and also to make it impossible for the user to select it as an option from the menu.

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

I've been told that "looping through the option elements" might be a possible solution, but I don't know how to implement this.

My goal is to have the error message "Please select a route type." returned if the user does not select anything from the dropdown menu.

Thanks very much for the help!

Answer 1

You need an option field with empty value and the required .

1. Solution with client-side check

<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>

You don't need php for this.

Try to submit this without select a value and you will get an error message.

All html and javascript checks are just goodies, you always have to check all values ​​with php(when you use php) when you get them from a form.

Never trust any data and check every data you receive!

UPDATE:

Maybe this is a possible solution you looking for with php:

2. Solution with php check

<?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";
    }
?>

If you wan't to check with the required option also on the client-side use:

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

You can also build your option fields with a loop and use the values from the array.

3. Solution with php check and custom error message(javascript alert):

<?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. Solution with php check and custom error message(php in option field):

<?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";
    }
?>

This is just a small example of how it could work, of course you can further optimize and adapt the code