javascripthtmlselectrequired

Can I apply the required attribute to <select> fields in HTML?


How can I check if a user has selected something from a <select> field in HTML?

I see <select> doesn't support the new required attribute... do I have to use JavaScript then? Or is there something I’m missing? :/


Solution

  • Mandatory: Have the first value empty - required works on empty values

    Prerequisites: correct html5 DOCTYPE and a named input field

    <select name="somename" required>
    <option value="">Please select</option>
    <option value="one">One</option>
    </select>
    

    As per the documentation (the listing and bold is mine)

    The required attribute is a boolean attribute.
    When specified, the user will be required to select a value before submitting the form.

    If a select element

    • has a required attribute specified,
    • does not have a multiple attribute specified,
    • and has a display size of 1 (do not have SIZE=2 or more - omit it if not needed);
    • and if the value of the first option element in the select element's list of options (if any) is the empty string (i.e. present as value=""),
    • 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.