title: Firefox html5 validation anomaly with dynamic select options
body: <p>Here is a simple html5 form with two select controls. Changing the selection in the first select generates a new list of options for the second select. Both have the "required" attribute, and an initially selected blank option. The odd bit is that I get a red validation outline around the second select control, without submitting the form. No tool-tip with an error message, just the outline.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;BODY&gt;
  
  &lt;SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"&gt;
  
  function select_update(srcCtrlId, DstCtrlId)
      {
      //alert(srcCtrlId+','+DstCtrlId+','+url);
      sel1 = document.getElementById(srcCtrlId);
      srcValue = sel1.value;
  
      sel2 = document.getElementById(DstCtrlId);
  
      while(sel2.options.length &gt; 0) {
          sel2.remove(0);
          }
  
      if (srcValue == '')
          {
          var oOption = new Option( '(no matches)', '', true, true );
          sel2.add(oOption);
          }
      else
          {
          var oOption = new Option( '-- Select2 --', '', true, true );
          sel2.add(oOption);
  
          for(i=1; i&lt;=5; ++i)
              {
              v = srcValue * 10 + i;
              s = 'Select2, Option'+v;
              var oOption = new Option( s, v, false, false );
              sel2.add(oOption);
              }
          }
      }
  
  function jsValidatePage1()
      {
      alert('onSubmit');
      return false;
      return true;
      }
  
  &lt;/script&gt;
  
  &lt;form onSubmit="return jsValidatePage1();"&gt;
  
  &lt;select name="select1" id="select1" size="1" onChange="select_update('select1','select2');" required&gt;
  &lt;option value="" selected="selected"&gt;-- Select1 --&lt;/option&gt;
  &lt;option value="1"&gt;Select1, Option1&lt;/option&gt;
  &lt;option value="2"&gt;Select1, Option2&lt;/option&gt;
  &lt;option value="3"&gt;Select1, Option3&lt;/option&gt;
  &lt;option value="4"&gt;Select1, Option4&lt;/option&gt;
  &lt;option value="5"&gt;Select1, Option5&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;select name="select2" id="select2" size="1" required&gt;
  &lt;option value="" selected="selected"&gt;-- Select2 --&lt;/option&gt;
  &lt;option value='' DISABLED&gt;(empty)&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;select name="select3" id="select3" size="1" required&gt;
  &lt;option value="" selected="selected"&gt;-- Select3 --&lt;/option&gt;
  &lt;option value="1"&gt;Select3, Option1&lt;/option&gt;
  &lt;option value="2"&gt;Select3, Option2&lt;/option&gt;
  &lt;option value="3"&gt;Select3, Option3&lt;/option&gt;
  &lt;option value="4"&gt;Select3, Option4&lt;/option&gt;
  &lt;option value="5"&gt;Select3, Option5&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;input type="text" name="dummy" value="" required=""&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;input type="submit"&gt;
  &lt;/form&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>fiddle here: <a href="https://jsfiddle.net/afg57g0u/1/" rel="nofollow">https://jsfiddle.net/afg57g0u/1/</a></p>
  
  <p>Run the code, and then select any option in the first select control.
  The second lights up red immediately, but the other required controls do not, so it's not validating the whole form, just the second select control (sort-of). </p>
  
  <p>This happens in Firefox 36.0.4. This does not happen on IE 11.0.17, Opera 28.0, Chrome 41.0.2272.101, or Safari 5.1.7 (duh). (on Win8 box)</p>
  
  <p>I can find no other mention online of a similar problem. I have tried numerous approaches to disable or work-around this problem, but no luck. 
  Does anyone have any ideas?  Is this a Firefox bug?</p>