Simple HTML form with Select Option disabled, is allowed to submit in Chrome and IE. Works fine in Firefox

Question

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.

Answer 1

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>

Answer 2

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.