Applying form validation of select menu similar to html5 required attribute of <input>

Question

I'm trying to make everything in my form required, including the select menus. w3schools says that no major browsers support the required attribute on <select> tags..

http://www.w3schools.com/tags/att_select_required.asp

Is there really no way to provide client side validation on select menus the same way as input text fields? I have a working plunkr here, where if you click check with everything blank, the warning appears under the the first input, even though there is a select menu above it.

if it were working the "this field is required" message would appear under the select menu since it is the first invalid form item. Additionally if you fill out all input fields no message appears anywhere. The code is in angular and spans 5 files, so view it on the plunkr .

If you know any way to apply the same validation to select menus, or have confirmation this is impossible, I'd greatly appreciate it.

required absolutely works in all major browsers & with angular you can easily check the form.valid property on submit which will tell you if it's valid or not. I wouldn't ever listen to w3schools unless you know what you are doing and just need a function reference. — Shan Robertson
– Shan Robertson, Commented Nov 25, 2014 at 1:09
what are you doing with the form when it is submitted? If it's calling a PHP file you could do the validation in there instead and redirect if there's an error. — SierraOscar
– SierraOscar, Commented Nov 25, 2014 at 1:09
@ShanRobertson is that not only when used with an <input> tag with html5? (genuine question) — SierraOscar
– SierraOscar, Commented Nov 25, 2014 at 1:10
@SO that would be server side validation, which already exists. it's calling a PHP AJAX file — J-Dizzle
– J-Dizzle, Commented Nov 25, 2014 at 1:10

Jukka K. Korpela · Accepted Answer · 2014-11-25 08:15:37Z

W3schools is incorrect as usual. Useful references like MDN on select tell that required is supported by modern versions of all major browsers; the main problem with support is lack of support in IE 9 and older.

However, you need to note the definition of the attribute: it means that the control satisfies the constraint if and only if its value is nonempty. Since the first option is selected by default (unless you make another option initially selected using the selected attribute), you need to make its value empty. Example:

:invalid { outline: solid red }

<form>
<select name=fruit required>
  <option value="">Please select a fruit
  <option>apple
  <option>orange
</select>
<input type=submit value=Submit>
</form>

If you need to cover IE 9 and older, too, just add simple JavaScript code that checks that value property of the select element is not empty when the form is to be submitted (or whenever you are checking the form data in the browser).

added ...> <option value=""></option> </select> to select.html in my plunkr, and didn't conflict with any CSS. Amazingly quick fix.

Lloyd Banks · Accepted Answer · 2014-11-25 02:44:03Z

The built-in HTML 5 alerts aren't coming up because technically you already have an option selected. Angular's select directive creates and defaults to a blank option if the ng-model attribute in the element doesn't refer to a specific options value.

Inspect your select element and you'll see

<option value="?" selected="selected"></option>

You could have your ng-model attribute refer to a valid options value and then hide the automatically generated blank value option, but then, you would always have a value pre-selected and your animation effects for select elements would be lost. See example here.

Your only other option is to create your own validation and have a div underneath each select element that either shows or hides based on if a valid value is selected.

Collectives™ on Stack Overflow

Applying form validation of select menu similar to html5 required attribute of <input>

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related