html - 选择未被用户选择的选项 - 验证

This is the script i am using for select a city. But the user proceeded without any selection from the list.

<select>
<option disabled selected value> -- select an option -- </option>
<option>City 1</option>
<option>City 2</option>
<option>City 3</option>
</select>

After user Submits the form, errors comes like "Notice: Undefined index: CITY in /home/...../public_html/address.php on line 44 Column 'CITY' cannot be null"

How to validate it before Submit the form?

<select name="city">
  <option value="Paris">Paris</option>
  <option value="London">London</option>
</select>

You need to give the option a value

php

<?php
$message='';

if(isset($_POST['submit']))
{

    if (!isset($_POST['city']) || $_POST['city'] === '') {
    $message .= " Please Select The City First <br />";
    }
}

if(isset($message))
{
echo '<div style="color:#FF0000;text-align:center;font-size:12px;">'.$message.'</div>';
}

?>

HTML

   <select name="city" selected disabled >
     <option value="city1">City 1</option>
     <option value="city2">City 2</option>
     <option value="city3">City 3</option>
    </select>

Place select to the form, add required, name and value attribute:

<form>
    <select name="city" required>
        <option disabled selected value> -- select an option -- </option>
        <option value="city1">City 1</option>
        <option value="city2">City 2</option>
        <option value="city3">City 3</option>
    </select>
<input type="submit" value="Send" />
</form>

Your code should be something like this. This way the your select will have a value when sent. And adding the "required" will make sure that the user will have to select before submitting.

<select name="city" required>
  <option selected disabled>SELECT CITY</option>
  <option value="City 1">City 1</option>
  <option value="city 2">City 2</option>
</select>

</div>

I added a javascript validation or your code. therefore it cannot be null. this code will block the submit, before you select.
Here is the html form,

 <form action="" method="post" onsubmit="return(Validate());" name="myform">
        <select name="city">
        <option disabled selected value> -- select an option -- </option>
        <option value="City 1">City 1</option>
        <option value="City 1">City 2</option>
        </select>
        <div id="name_error" style="color:red;"></div>
    </form>

Here is the JS part

 <script type="text/javascript">
   <!--
      // Form validation code will come here.

      function Validate()
      {

         if( document.myform.city.value == "" )
         {
            alert( "Please provide your city!" );

            name_error.textContent = "City is Required.!"; 
            document.myform.city.focus() ;
            return false;
         }


         return( true );
      }
   //-->
</script>

You can make the select tag required and pass value for each option. That will do the rest on your client side validation

<form method = 'post' action='address.php'>
<select required>
<option value =""> -- select an option -- </option>
<option value ="city1">City 1</option>
<option value ="city1">City 2</option>
<option value ="city1">City 3</option>
</select>
</form>

and if you also wants server side validation you must include a name attribute in the select tag.

<form method ='post' action='address.php'>
    <select name="cities" required>
    <option value =""> -- select an option -- </option>
    <option value ="city1">City 1</option>
    <option value ="city1">City 2</option>
    <option value ="city1">City 3</option>
    </select>
    </form>

and form the name you can get the value of the select option and do further what you want

$city = $_POST['cities'];