title: Select Required validation not working in form
body: <p>The "required" validation is working for form </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;form action=''&gt;
  &lt;select required&gt;
    &lt;option value=""&gt;None&lt;/option&gt;
    &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
    &lt;option value="saab" &gt;Saab&lt;/option&gt;
    &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
    &lt;option value="audi"&gt;Audi&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="submit"&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>but is not working for the same form if I move the option with empty value down the list. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;form action=''&gt;
  &lt;select required&gt;
    &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
    &lt;option value="saab" &gt;Saab&lt;/option&gt;
    &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
    &lt;option value="audi"&gt;Audi&lt;/option&gt;
    &lt;option value=""&gt;None&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="submit"&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why?
  How exactly does the select element validation work?</p>
  
  <p>Referred to the following: <a href="https://www.w3schools.com/tags/att_select_required.asp" rel="noreferrer">https://www.w3schools.com/tags/att_select_required.asp</a></p>