Firefox html5 validation anomaly with dynamic select options

Question

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.

<!DOCTYPE html>
<BODY>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function select_update(srcCtrlId, DstCtrlId)
    {
    //alert(srcCtrlId+','+DstCtrlId+','+url);
    sel1 = document.getElementById(srcCtrlId);
    srcValue = sel1.value;

    sel2 = document.getElementById(DstCtrlId);

    while(sel2.options.length > 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<=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;
    }

</script>

<form onSubmit="return jsValidatePage1();">

<select name="select1" id="select1" size="1" onChange="select_update('select1','select2');" required>
<option value="" selected="selected">-- Select1 --</option>
<option value="1">Select1, Option1</option>
<option value="2">Select1, Option2</option>
<option value="3">Select1, Option3</option>
<option value="4">Select1, Option4</option>
<option value="5">Select1, Option5</option>
</select>
<br><br>
<select name="select2" id="select2" size="1" required>
<option value="" selected="selected">-- Select2 --</option>
<option value='' DISABLED>(empty)</option>
</select>
<br><br>
<select name="select3" id="select3" size="1" required>
<option value="" selected="selected">-- Select3 --</option>
<option value="1">Select3, Option1</option>
<option value="2">Select3, Option2</option>
<option value="3">Select3, Option3</option>
<option value="4">Select3, Option4</option>
<option value="5">Select3, Option5</option>
</select>
<br><br>
<input type="text" name="dummy" value="" required="">
<br><br>
<input type="submit">
</form>

</html>

fiddle here: https://jsfiddle.net/afg57g0u/1/

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).

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)

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?

ps don't bother with safari on windows. it hasn't been updated in 3 years. nothing like safari on ios. — dewd, Mar 28 '15 at 19:32
this may help a little. someone else has had a similar issue on a form field which has required attribute. http://stackoverflow.com/questions/5939341/firefox-4-is-there-a-way-to-remove-the-red-border-in-a-required-form-input, alternatively, you could try removing the required property and adding it at the point of form submission. — dewd, Mar 28 '15 at 19:55
Thanks. The issue referred to might be related, but it's a static situation and a much older version of Firefox. Does it even still do that? I tried removing the required setting before the update, and putting it back afterwards, but no joy. — TomTerrific, Mar 28 '15 at 20:04
it kind of works if you add the attribute to jsValidatePage1() ie `sel2.setAttribute('required',true); if (! sel2.value) { return false; }` but not ideal as attribute will not be set until form submits. — dewd, Mar 28 '15 at 20:08
maybe try a mousedown listener on the submit button, as this may fire before the submit check? — dewd, Mar 28 '15 at 20:09
Yes! The issues seem to be related. It's pre-validating the state of the selects, but not the input, even though all have the 'required' attribute and blank value. Adding some css with the invalid pseudo-op shows this. Initially, all three selects are in the 'invalid' state. So, the problem is a Firefox bug, AFAIC. The masking the problem with css is no solution, though. I tried removing the required setting before the update, and putting it back afterwards, but no joy. — TomTerrific, Mar 28 '15 at 20:23

dewd · Answer 1 · 2015-03-28T20:42:59.067

0

Remove required attribute from select before changing options. Add a mousedown listener to submit button and set the required attribute back on the select then. With id given to submit button:

submit = document.getElementById('submitbtn');

submit.addEventListener('mousedown',function()    {
     sel2.setAttribute('required',true);
});

working fiddle: https://jsfiddle.net/afg57g0u/2/

note, you should also add a listener for keydown where keycode is the enter button, and touchstart for touch devices. they should call the same function as the mousedown event.

edited Mar 28 '15 at 20:42

answered Mar 28 '15 at 20:23

dewd

4,380
3
29
43

Yes, that does it. I tried something similar before, but used `sel2.required=false` instead of removeAttribute. I would think both should work. Is there a reason why setAttribute should be done in a mouse event handler, rather than simply in the onSubmit code? – TomTerrific Mar 28 '15 at 21:30
Yes. The mousedown event happens before the html validation. The on submit happens after meaning no validation would take place. Note to cover all methods of submit you should cover keydown at the document level with enter keycode and touchstart on the submit button. – dewd Mar 28 '15 at 22:29

Firefox html5 validation anomaly with dynamic select options

1 Answers1