Html option selected disabled cause select required not working

Question

<select name="status" required>
<option selected disabled>status</option>

I have set required attribute in html select.

My first option set selected disabled for display text.

However it will cause required attribute not working.

anyone know how to solve this problem?

required will not working in lower versions of ie9 and safari. Are you using any of these browsers!? — Keerthana Prabhakaran, Feb 24 '17 at 03:59
because 1st option auto select, so select required no longer to work — Benjamin W, Feb 24 '17 at 04:00
not browser issue, my problem is 1st display option auto select cause required not working — Benjamin W, Feb 24 '17 at 04:01
look into the accepted answer here. http://stackoverflow.com/questions/6048710/can-i-apply-the-required-attribute-to-select-fields-in-html5 Hope it helps! — Keerthana Prabhakaran, Feb 24 '17 at 04:03
the first option is to be kept blank for select required to work! :) — Keerthana Prabhakaran, Feb 24 '17 at 04:04
Possible duplicate of [Can I apply the required attribute to — JBallin, Jan 12 '18 at 00:23

JBallin · Answer 1 · 2022-04-27T02:49:03.447

You need to set the value attribute of option to an empty string:

<select name="status" required>
    <option selected disabled value="">status</option>
</select>

select will return the value of the selected option to the server when the user presses submit on the form. An empty value is the same as an empty text input → raising the required message.

w3schools:

The value attribute specifies the value to be sent to a server when a form is submitted.

Example

document.querySelector('form').onsubmit = (e) => {
  e.preventDefault();
  const status = e.target[0].value;
  console.log(`Your status is: "${status}"`);
 }

<form>
  <select name="status" required>
    <option selected disabled value="">Select a status...</option>
    <option value="Good">Good</option>
    <option value="Bad">Bad</option>
   </select>
   <input type="submit" value="Submit">
 </form>

Thanks. It really work for this `` – Bishwas Bhandari Oct 21 '20 at 04:52 — Bishwas Bhandari, Oct 21 '20 at 04:52

Html option selected disabled cause select required not working

1 Answers1

Example