Menu
The "required" validation is working for form
<!DOCTYPE html>
<html>
<body>
<form action=''>
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>but is not working for the same form if I move the option with empty value down the list.
<!DOCTYPE html>
<html>
<body>
<form action=''>
<select required>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="">None</option>
</select>
<input type="submit">
</form>
</body>
</html>Why? How exactly does the select element validation work?
Referred to the following: https://www.w3schools.com/tags/att_select_required.asp
643
The required attribute is there in the HTML select element. If it is not working for you, then try checking back the “first value” field. You need an empty value there.
The required attribute of the <select> element is to let users know that the <select> drop-down is required and need to be submitted before the form is submitted. If you won't select the value from the drop-down and try to submit the form, it won't submit and a warning would be visible on the web page itself.
The simplest HTML validation feature is the required attribute. To make an input mandatory, add this attribute to the element. When this attribute is set, the element matches the :required UI pseudo-class and the form won't submit, displaying an error message on submission when the input is empty.
The following is from w3 docs:
The required attribute is a boolean attribute. When specified, the user will be required to select a value before submitting the form.
...
if the value of the first option element in the select element's list of options (if any) is the empty string
...
Which means that the required attribute works only if the value of the first element is empty
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
