Почему проверка ввода в IE10 не выполняется для этой требуемой структуры select & optgroup

Я не могу понять, почему 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/

Ответы

Ответ 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>

Это похоже на работоспособное решение, так как группы параметров не могут быть выбраны.

Ответ 2

Проблема (к счастью?) более предсказуема, чем вы могли подумать. Первоначальное тестирование показывает, что форма считается недействительной, если выбранный индекс опциона соответствует индексу его родителя optgroup среди элементов sibling optgroup.

По существу, элемент 0 в группе 0 недействителен. Пункт 1 в группе 1 также недействителен. И, как повезет, элемент 4 в группе 4 также недействителен (см. Шаблон?). Это, безусловно, похоже на ошибку. Это не тот случай, когда select имеет атрибут multiple boolean.

Вы можете увидеть мою модификацию формы здесь: http://jsfiddle.net/jonathansampson/c86eY/