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.

Answer 1

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).

Answer 2

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.