带有动态选择选项的 Firefox html5 验证异常答案

【问题标题】：Firefox html5 validation anomaly with dynamic select options带有动态选择选项的 Firefox html5 验证异常
【发布时间】：2015-06-02 00:09:22
【问题描述】：

这是一个带有两个选择控件的简单 html5 表单。更改第一个选择中的选择会为第二个选择生成一个新的选项列表。两者都具有“必需”属性，以及最初选择的空白选项。奇怪的是，我在第二个选择控件周围得到了一个红色的验证轮廓，而没有提交表单。没有带有错误消息的工具提示，只有大纲。

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

运行代码，然后选择第一个选择控件中的任何选项。第二个立即亮起红色，但其他必需的控件没有，所以它没有验证整个表单，只是第二个选择控件（排序）。

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

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

【问题讨论】：

ps 不要在 Windows 上使用 safari。它已经3年没有更新了。没有什么比 ios 上的 safari 更棒了。
这可能会有所帮助。其他人在具有必需属性的表单字段上遇到了类似的问题。 stackoverflow.com/questions/5939341/…，或者，您可以尝试删除所需的属性并在提交表单时添加它。
谢谢。提到的问题可能是相关的，但它是一个静态情况和一个更旧版本的 Firefox。它甚至仍然这样做吗？我尝试在更新之前删除所需的设置，然后再将其放回，但没有任何乐趣。
如果您将属性添加到 jsValidatePage1() 即sel2.setAttribute('required',true); if (! sel2.value) { return false; }，它会起作用，但不理想，因为在表单提交之前不会设置属性。
也许可以在提交按钮上尝试一个 mousedown 监听器，因为这可能会在提交检查之前触发？

标签： javascript html validation select options

【解决方案1】：

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

submit = document.getElementById('submitbtn');

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

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

注意，您还应该为 keydown 添加一个侦听器，其中 keycode 是输入按钮，并为触摸设备添加 touchstart。它们应该调用与 mousedown 事件相同的函数。

【讨论】：

是的，就是这样。我之前尝试过类似的方法，但使用了sel2.required=false 而不是 removeAttribute。我认为两者都应该工作。为什么 setAttribute 应该在鼠标事件处理程序中完成，而不是简单地在 onSubmit 代码中完成？
是的。 mousedown 事件发生在 html 验证之前。 on submit 发生在意味着不会进行验证之后。请注意，要涵盖所有提交方法，您应该在文档级别覆盖 keydown，在提交按钮上输入 keycode 和 touchstart。