禁用选择选项的简单HTML表单允许在Chrome和IE中提交。在Firefox中正常工作

问题描述：

I have a simple HTML form that submits to another page. Select options are being used with one being 'disabled' and 'selected'. In Chrome and Internet Explorer this form is allowed to be submitted, but in Firefox it works correctly and tells me to select an option.

Code:

<form name=cars method=post action=submit.php>
    <select required>
        <option value="volvo" disabled="disabled" selected>Volvo</option>
        <option value="saab">Saab</option>
        <option value="vw">VW</option>
        <option value="audi">Audi</option>
        <input type=submit value=submit name=submit>
    </select> 
</form>

In FireFox, as expected, when I hit the submit button, I get the message:

"Please Select an item in the list."

On IE and Chrome it tries to submit to the submit page.

我有一个提交到另一个页面的简单HTML表单。正在使用选择选项，其中一个选项被“禁用”和“已选中”。在Chrome和Internet Explorer中，允许提交此表单，但在Firefox中它可以正常工作并告诉我选择一个选项。 p>

代码： p>

 ＆lt; form name = cars method = post action = submit.php＆gt; 
＆lt; select required＆gt; 
＆lt; option value =“volvo”disabled =“disabled”selected＆gt; Volvo＆lt; / option＆gt; 
  ＆lt; option value =“saab”＆gt; Saab＆lt; / option＆gt; 
＆lt; option value =“vw”＆gt; VW＆lt; / option＆gt; 
＆lt; option value =“audi”＆gt; Audi＆lt; / option＆gt; \  n＆lt; input type = submit value = submit name = submit＆gt; 
＆lt; / select＆gt;  
＆lt; / form＆gt; 
  code>  pre> 
 
 在FireFox中，正如预期的那样，当我点击提交按钮时，收到消息： p> 
 
 “请选择列表中的项目。” p> 
 
 
在IE和Chrome上，它会尝试提交到提交页面。 p> 
  div>

答

Above solution will work in all browsers except IE 7-8-9, As required attribute;

IE 10: works fine.
IE 9: the required attribute doesn't trigger validation of a field.
IE 7 & 8: the required attribute appears to prevent validation of a field.

Ref 'required' attibute support in different browsers:

http://html5test.com/compare/feature/form-select-required.html

Alternative solution can be JQuery.

答

That's because the select already has a value selected. You have to put a option without a value, something like this. Also, I'll help you and clean your code:

<form name="cars" method="post" action="submit.php">
    <select name="car" required>
        <option value="">Select a car...</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="vw">VW</option>
        <option value="audi">Audi</option>
    </select> 
    <input type="submit" value="submit" name="submit">
</form>

enter image description here

禁用选择选项的简单HTML表单允许在Chrome和IE中提交。 在Firefox中正常工作

相关推荐

禁用选择选项的简单HTML表单允许在Chrome和IE中提交。在Firefox中正常工作