html - 为什么 IE10 的输入验证对于这个必需的 select & optgroup 结构会失败

Question

我不明白为什么 IE10 认为索引 1 和 6 处的选项无效？我希望索引 0 处的唯一选项应该失败并阻止提交表单。

<select required="required">
    <option value="">Select</option>
    <optgroup label="First">
        <option value="A">1</option>
        <option value="B">2</option>
        <option value="C">3</option>
        <option value="D">4</option>
    </optgroup>
    <optgroup label="Second">
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </optgroup>
</select>

jsfiddle 在这里:http://jsfiddle.net/J3wFx/

Answer 1

我们遇到了同样的问题。

在一天中的大部分时间都在与此作斗争之后，我们的一位开发人员(Chris McDonald - 必须在应有的功劳时给予功劳)通过添加 value="0" 找到了解决此问题的方法到选项组标签。

这是有问题的原始代码: http://jsfiddle.net/PHEej/1/

<form id="addToCart" class="trackForm" method="post" action="/socks/jmx">

<div id="purchase" price=" $13.99 - $14.99">
<ol>
    <li id="purchase_promotion" class="price" price=" $13.99 - $14.99">
        <label class="retailPrice required" for="purchase_promotion"></label>
        <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <span itemprop="price"> $13.99 - $14.99</span>
        </span>
    </li>
    <li id="purchase_sizes" class="size">
        <label for="purchase_sizes" class="required">Shoe Size</label>
        <select id="purchase_sizes" name="purchase[sizes]" required="required" class="size">
            <option value="">Choose a shoe size</option>
            <optgroup label="men - us">
                <option value="1">5.5 to 8.5 - $13.99</option>
                <option value="2">9 to 12.5 - $13.99</option>
                <option value="3">13 to 15 - $14.99</option>
            </optgroup>
            <optgroup label="women - us">
                <option value="4">6.5 to 10 - $13.99</option>
                <option value="5">10.5 to 13 - $13.99</option>
            </optgroup>
        </select>
    </li>
    <li id="purchase_color"><label for="purchase_color" class="required">Colors</label><select
                id="purchase_color" name="purchase[color]" required="required">
            <option value="">Choose your color</option>
            <option value="93">White/platinum</option>
            <option value="92">White/navy</option>
        </select></li>
    <li id="purchase_quantity"><label for="purchase_quantity" class="required">Quantity</label><select
                id="purchase_quantity" name="purchase[quantity]" required="required">
            <option value="">Choose a quantity</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
        </select></li>
    <input type="hidden" id="purchase_slug" name="purchase[slug]" value="jmx"/>
    <input type="hidden" id="purchase__token" name="purchase[_token]"  value="26dcd00e64754376fadefb38a534df85996ce4d3"/>
</ol>
</div>
<button id="submitButton" type="submit" class="cartButton buttonBlock trackForm"
        data-ga_params="Add to Cart|Add to Cart Submit|">
    <span class="icon-cart-after">Add to cart</span>
</button>
</form>

在此示例中，如果您选择鞋码中的第一个或最后一个项目，它不会在提交表单时识别该选择。

下面是允许我们越过它的“固定”代码: http://jsfiddle.net/PHEej/3/

<form id="addToCart" class="trackForm" method="post" action="/socks/jmx">

<div id="purchase" price=" $13.99 - $14.99">
<ol>
    <li id="purchase_promotion" class="price" price=" $13.99 - $14.99">
        <label class="retailPrice required" for="purchase_promotion"></label>
        <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <span itemprop="price"> $13.99 - $14.99</span>
        </span>
    </li>
    <li id="purchase_sizes" class="size">
        <label for="purchase_sizes" class="required">Shoe Size</label>
        <select id="purchase_sizes" name="purchase[sizes]" required="required" class="size">
            <option value="">Choose a shoe size</option>
            <optgroup value="0" label="men - us">
                <option value="1">5.5 to 8.5 - $13.99</option>
                <option value="2">9 to 12.5 - $13.99</option>
                <option value="3">13 to 15 - $14.99</option>
            </optgroup>
            <optgroup  value="0" label="women - us">
                <option value="4">6.5 to 10 - $13.99</option>
                <option value="5">10.5 to 13 - $13.99</option>
            </optgroup>
        </select>
    </li>
    <li id="purchase_color"><label for="purchase_color" class="required">Colors</label><select
                id="purchase_color" name="purchase[color]" required="required">
            <option value="">Choose your color</option>
            <option value="93">White/platinum</option>
            <option value="92">White/navy</option>
        </select></li>
    <li id="purchase_quantity"><label for="purchase_quantity" class="required">Quantity</label><select
                id="purchase_quantity" name="purchase[quantity]" required="required">
            <option value="">Choose a quantity</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
        </select></li>
    <input type="hidden" id="purchase_slug" name="purchase[slug]" value="jmx"/>
    <input type="hidden" id="purchase__token" name="purchase[_token]"  value="26dcd00e64754376fadefb38a534df85996ce4d3"/>
</ol>
</div>
<button id="submitButton" type="submit" class="cartButton buttonBlock trackForm"
        data-ga_params="Add to Cart|Add to Cart Submit|">
    <span class="icon-cart-after">Add to cart</span>
</button>
</form>

这似乎是一个可行的解决方案，因为无论如何都无法选择选项组。