为什么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

我们遇到了同样的问题.

在这一天的大部分时间里,我们的一个开发人员(克里斯麦克唐纳 - 必须在信用到期时给予信用)通过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>

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