JSFiddle - React, Tailwind, and code Playground

by richcon

HTML

<select required>
  <option value="" selected>Select the option below</option>
  <option value="The Option Below">The Option Below</option>
</select>

<p>Does it have a value? <span style="font-weight: bold" id="value"></span></p>
<p>Does select.validity.valid show as valid? <span style="font-weight: bold" id="valid"></span></p>
<p>Does select.validity.valueMissing show as false? <span style="font-weight: bold" id="valueMissing"></span></p>

JavaScript

document.querySelector("select[required]").addEventListener("change", function(event) {
	var input = event.target;
  
  var value = input.value;
  var isValid = input.validity.valid;
  var isValueMissing = input.validity.valueMissing;
  
  document.querySelector("#value").textContent = value ? "Yes" : "No";
  document.querySelector("#valid").textContent = isValid ? "Yes" : "No";
  document.querySelector("#valueMissing").textContent = isValueMissing ? "No" : "Yes";
});