CODEWITHSUNDEEP
htmlinternet-explorer-10
tony z
tony z

Reputation: 113

Why does IE10's input validation fail for this required select & optgroup structure

I can't figure out why IE10 considered options at indexes 1 & 6 invalid? I am expecting that only option at index 0 should fail and prevent the form from submitting.

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

Upvotes: 10

Views: 2674

Answers (2)

Mark Ford
Mark Ford

Reputation: 152

We were experiencing the same issue.

After fighting this most of the day, one of our developers (Chris McDonald - have to give credit where credit is due) found a "fix" for this by adding a value="0" to the option group tags.

Here is the original code with the issue: 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 this example, if you select the first or last item in shoe size, it would not recognize the choice upon submitting the form.

And here is the "fixed" code that allowed us to move past it: 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>

This seems to be a workable solution as the option groups are not selectable anyway.

Upvotes: 10

Sampson
Sampson

Reputation: 268414

The problem is (fortunately?) more predictable than you might have thought. Initial testing suggests that the form is found to be invalid when the selected option's index matches the index of its optgroup parent among sibling optgroup elements.

Essentially, item 0 in group 0 is invalid. Item 1 in group 1 is also invalid. And, as luck would have it, item 4 in group 4 is invalid as well (see the pattern?). This most certainly seems like a bug of some sort. This is not the case when the select has the multiple boolean attribute.

You can see my modification of your form here: http://jsfiddle.net/jonathansampson/c86eY/

Upvotes: 3

Related Questions