html - この必要な select & optgroup 構造に対して IE10 の入力検証が失敗するのはなぜですか?

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

同じ問題が発生していました。

一日中これと戦った後、私たちの開発者の 1 人 (Chris McDonald - クレジットが必要な場合はクレジットを表示する必要があります) がvalue="0"、オプション グループ タグに a を追加することで、これに対する "修正" を見つけました。

問題のある元のコードは次のとおりです。 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>

オプショングループはとにかく選択できないため、これは実行可能なソリューションのようです。