Menu
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/
261
The Form Tag has “novalidate” Attribute This is the first and the most common reason that causes the issue. HTML5 required attribute validation doesn't work if the form has the novalidate attribute in its markup. With the presence of the attribute, the tag looks like <form action="#" novalidate> .
Improper input validation or unchecked user input is a type of vulnerability in computer software that may be used for security exploits. This vulnerability is caused when "[t]he product does not validate or incorrectly validates input that can affect the control flow or data flow of a program."
When software does not validate input properly, an attacker is able to craft the input in a form that is not expected by the rest of the application. This will lead to parts of the system receiving unintended input, which may result in altered control flow, arbitrary control of a resource, or arbitrary code execution.
1. Required attribute: If you want to make an input mandatory to be entered by the user, you can use the required attribute. This attribute can be used with any input type such as email, URL, text, file, password, checkbox, radio, etc.
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/
44
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.
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
