required in select input with value

Question

i have code

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
<select required>
  <option value=1>Volvo</option>
  <option value=2>Saab</option>
  <option value=3>Mercedes</option>
  <option value=4>Audi</option>
  <option value=5 selected>None</option>
</select>
<input type="submit">
</form>

</body>
</html>

none is default value in selected with value 5, can there still be a required message when the user selects none? how to fix that, thank you

try this: https://stackoverflow.com/questions/14299017/html-select-element-with-default-not-in-the-options — Gargantua, Apr 05 '18 at 08:22
_“can there still be a required message when the user selects none?”_ - no, because it _is_ a valid choice. The only way in “pure HTML” would be to make this a proper placeholder option, https://www.w3.org/TR/html5/sec-forms.html#the-select-element: _“If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element’s list of options (if any) is the empty string, [...], then that option is the select element’s placeholder label option.”_ — CBroe, Apr 05 '18 at 08:37

Joseph_J · Answer 1 · 2018-04-05T08:31:13.707

This is a php option that will display a warning.

<?php

if(isset($_POST['check']) && $_POST){

  if($_POST['car'] == 5){

    echo 'You must select a value.';

  }

}

?>

<!DOCTYPE html>
<html>
<body>

<form action="" method="post" enctype="multipart/form-data">
<select id="car" name="car" required>
  <option value=1>Volvo</option>
  <option value=2>Saab</option>
  <option value=3>Mercedes</option>
  <option value=4>Audi</option>
  <option value=5 selected>None</option>
</select>
<input type="submit" name="check" value="Submit">
</form>

</body>
</html>

And here is one of many possible js solutions:

<script>

    function checkSelect(){

        if(document.getElementById('car').value == 5){

          alert('You must select a car.');

        }

    }


</script>

<!DOCTYPE html>
<html>
<body>


<form action="" method="post" enctype="multipart/form-data" onsubmit="checkSelect()">
<select id="car" name="car" required>
  <option value=1>Volvo</option>
  <option value=2>Saab</option>
  <option value=3>Mercedes</option>
  <option value=4>Audi</option>
  <option value=5 selected>None</option>
</select>

<input type="submit" name="check" value="Submit" onSubmit>
</form>

</body>
</html>

I would also consider using something like jQuery Validation plugin which is a form validator. Makes things alot easier. https://jqueryvalidation.org/

score 0 · Answer 2 · answered Apr 05 '18 at 08:36

you can Leave Value Empty to None Option Like this :

<!DOCTYPE html>
<html>
<body>

<form action="" method="post">
<select id="select" required>
<option value="">None</option> 
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
<input type="submit" name="check" value="Submit">
</form>

</body>
</html>

required in select input with value

2 Answers2