CODEWITHSUNDEEP
htmlformsgoogle-chrome
Chüngel
Chüngel

Reputation: 385

Front-end form validation not working in Chrome

I want to create a form with a required drop-down menu. If the submit button is clicked before selecting an item from the drop-down menu, the user should see a pop up error message. For example in FF this message is usually:"Please select an item in the list" or in Chrome:"Please fill out this field" or in IE:"You must choose an item from the list".

This is working smoothly for IE and Firefox but it's driving me crazy in Google Chrome. Where the message does not pop up and the user can continue filling the other fields:

Here is the code:

<select class="form-control" name="Product" id="product" required="">
        <optgroup id="Food" label="Food">                                               
        <option value="" label="Select a product ...">Select a product ... </option>
        <option value="Arepa" label="">Arepa</option>
        <option value="Empanadas" label="">Empanadas</option>
        <option value="Tamales" label="">Tamales</option>
        </optgroup>
</select>

Is there something additional that I have to specify for Chrome?

Thanks,

Upvotes: 1

Views: 2347

Answers (2)

Yezy Ilomo
Yezy Ilomo

Reputation: 41

Use <option selected disabled value="">Food</option> instaead of <optgroup id="Food" label="Food">

Upvotes: 0

C3roe
C3roe

Reputation: 96250

Once you remove the optgroup, it works in Chrome as well.

Seems Chrome is in line with the specification here, https://www.w3.org/TR/html5/forms.html#attr-select-required:

If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.”

And if it is not the placeholder, then it is a valid value for submission, and therefor the required restriction is fulfilled as long as that option is the currently selected one.

Upvotes: 1

Related Questions