Dlaczego weryfikacja wejścia IE10 kończy się niepowodzeniem dla tej wymaganej struktury wyboru i grupy optycznej

Question

Nie mogę zrozumieć, dlaczego IE10 uznał opcje w indeksach 1 & 6 za nieważne? Spodziewam się, że tylko opcja w indeksie 0 powinna zawieść i uniemożliwić przesłanie formularza.

<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 tutaj: http://jsfiddle.net/J3wFx/

Answer 1

Byliśmy przeżywa ten sam problem.

Po walce z tym przez większość dnia, jeden z naszych programistów (Chris McDonald - musi udzielić kredytu, w którym należy się kredyt) znalazł "poprawkę", dodając value="0" do znaczników grupy opcji.

Oto oryginalny kod z problemem: 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> 

W tym przykładzie, jeśli wybrać pierwszą lub ostatnią pozycję w rozmiar buta, nie byłoby rozpoznać wybór po wysłaniu formularza.

I tu jest „stałe” kod, który pozwolił nam przejść obok niej: 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> 

To wydaje się być praktycznym rozwiązaniem jako grupy opcyjne nie są wybierane tak.

Answer 2

Problem jest (na szczęście?) Bardziej przewidywalny niż można pomyśleć. Wstępne testy sugerują, że formularz zostanie uznany za nieprawidłowy, gdy indeks wybranej opcji będzie zgodny z indeksem jego rodzica optgroup dla elementów rodzeństwa: .

Zasadniczo pozycja 0 w grupie 0 jest nieprawidłowa. Pozycja 1 w grupie 1 jest również nieważna. I, na szczęście, element 4 w grupie 4 jest również nieważny (patrz wzorzec?). To z pewnością wydaje się jak jakiś błąd. Nie dzieje się tak, gdy select ma atrybut boolowski multiple.

Można zobaczyć moją modyfikację z formularza tutaj: http://jsfiddle.net/jonathansampson/c86eY/