आईई 10 की इनपुट सत्यापन इस आवश्यक चयन और ऑप्टग्रुप संरचना

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> 

इस समस्या का समाधान होने के लिए के रूप में विकल्प समूहों वैसे भी चयन नहीं कर रहे हैं लगता है:

और यहाँ "निर्धारित" कोड है कि हम यह अतीत ले जाने की अनुमति है।

Answer 2

समस्या (सौभाग्य से?) है अधिक पूर्वानुमान की तुलना में आप सोचा होगा। प्रारंभिक परीक्षण से पता चलता है कि यह विकल्प अमान्य पाया जाता है जब चयनित विकल्प का सूचकांक optgroup सिबलिंग optgroup तत्वों के बीच माता-पिता के सूचकांक से मेल खाता है।

अनिवार्य रूप से, समूह 0 में आइटम 0 अमान्य है। समूह 1 में आइटम 1 भी अमान्य है। और, भाग्य के रूप में, समूह 4 में आइटम 4 भी अमान्य है (पैटर्न देखें?)। यह निश्चित रूप से कुछ प्रकार की एक बग की तरह लगता है। यह तब नहीं है जब select में multiple बूलियन विशेषता है।

आप अपने प्रपत्र यहाँ की मेरी संशोधन देख सकते हैं: http://jsfiddle.net/jonathansampson/c86eY/