Question

这是一个带有两个选择控件的简单html5表单。更改第一个选择中的选择会为第二个选择生成新的选项列表。两者都有'＃34; required＆＃34;属性和最初选择的空白选项。奇怪的是，我在第二个选择控件周围获得了一个红色验证大纲，而没有提交表单。没有带有错误消息的工具提示，只是大纲。

<!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>

在这里摆弄：https://jsfiddle.net/afg57g0u/1/

运行代码，然后在第一个选择控件中选择任何选项。第二个指示灯立即亮红色，但其他所需控件不亮，因此它不验证整个表单，只是第二个选择控件（sort-of）。

这在Firefox 36.0.4中会发生。这不会发生在IE 11.0.17，Opera 28.0，Chrome 41.0.2272.101或Safari 5.1.7（duh）上。（在Win8盒子上）

我在网上找不到类似问题。我已经尝试了很多方法来禁用或解决这个问题，但没有运气。有没有人有任何想法？这是Firefox的错误吗？

Answer 1

在更改选项之前从select中删除必需属性。添加一个mousedown侦听器以提交按钮，然后在select上设置所需的属性。用id提交按钮：

submit = document.getElementById('submitbtn');

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

工作小提琴：https://jsfiddle.net/afg57g0u/2/

请注意，您还应该为keydown添加一个侦听器，其中keycode是enter按钮，touchstart是触摸设备。他们应该调用与mousedown事件相同的功能。

Firefox html5验证异常与动态选择选项

1 个答案: