Perché la convalida dell'input di IE10 eseguita per questo necessario selezionare & optgroup struttura

Question

io non riesco a capire il motivo per cui le opzioni IE10 considerate a indici 1 & 6 non valida? Mi aspetto che unica opzione in corrispondenza dell'indice 0 dovrebbe fallire e prevenire la forma di presentare.

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

Answer 1

Stavamo vivendo lo stesso problema.

Dopo aver combattuto la maggior parte della giornata, uno dei nostri sviluppatori (Chris McDonald - devono dare credito quando il credito è dovuto) ha trovato un "fix" per questo con l'aggiunta di un value="0" ai tag gruppo di opzioni.

Ecco il codice originale con il tema: 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> 

In questo esempio, se si seleziona il primo o l'ultimo elemento in numero di scarpe, non avrebbe riconosciuto la scelta su di inviare il modulo.

Ed ecco il codice "fisso" che ci ha permesso di muoverci passato: 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> 

Questa sembra essere una soluzione praticabile, come i gruppi di opzioni non sono selezionabili in ogni caso.

Answer 2

Il problema è (per fortuna?) Più prevedibile di quanto si possa pensare. I test iniziali suggeriscono che la forma si trova ad essere valido quando l'indice della opzione selezionata corrisponde all'indice del suo genitore optgroup tra pari livello optgroup elementi.

In sostanza, collo 0 nel gruppo 0 non è valido. Anche l'elemento 1 nel gruppo 1 non è valido. E, come la fortuna ha voluto che, punto 4 nel gruppo 4 non è valido pure (vedere il modello?). Questo sicuramente sembra un insetto di qualche tipo. Questo non è il caso in cui il select ha l'attributo booleano multiple.

È possibile vedere la mia modifica del vostro modulo qui: http://jsfiddle.net/jonathansampson/c86eY/