HTML make

Question

I have the following piece of code in a contact form for a site I am designing:

<select id="Category" name="Category">
    <option value="0" selected="selected" disabled>Category</option>
    <option value="1">General Info</option>
    <option value="2">Booking</option>
    <option value="3">Auditions</option>
</select>

I would like set the menu such that the user cannot leave category as the selected option. Is there any way to do this with HTML? If not, how would I do it with JavaScript?

Thank you

score 40 · Answer 1 · answered Apr 29 '15 at 18:43

According to the HTML5 spec,

Constraint validation: If the element has its required attribute specified, and either none of the option elements in the select element's list of options have their selectedness set to true, or the only option element in the select element's list of options with its selectedness set to true is the placeholder label option, then the element is suffering from being missing.

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.

Therefore, you can use

<select id="Category" name="Category" required>
  <option value="" selected disabled>Category</option>
  <option value="1">General Info</option>
  <option value="2">Booking</option>
  <option value="3">Auditions</option>
</select>

score 6 · Accepted Answer · answered Apr 28 '15 at 19:20

6

When the user click on any option, he can´t return the first one back. But he can submit form without change, then you need to validate via JS.

It's quite simple,

function validate() {
    var select = document.getElementById('Category');
    return !select.value == 0;
}

And the form in HTML:

<form onsubmit="return validate()">...</form>

answered Apr 28 '15 at 19:20

pavel

26,538
10
45
61

2

I would use `!select.selectedIndex === 0` – Roy Miloh Apr 28 '15 at 19:25
How does the precedence work on that suggestion? Did you check before posting that thought bubble? Does a boolean value ever "triple equal" `0`? Have a look at `let val = 0; !val === 0;` then `let val = 1; !val === 0;` ...hmm. – mickmackusa Sep 13 '20 at 23:32

score 1 · Answer 3 · edited May 23 '17 at 11:47

1

Will disabling select work for you?

<select id="Category" name="Category" disabled>
    <option value="0" selected="selected">Category</option>
    ...
</select>

Or maybe disabling all but selected option will work for you (as shown here: https://stackoverflow.com/a/23428851/882073)

edited May 23 '17 at 11:47

Community

1
1

answered Apr 28 '15 at 21:07

Sergiy T.

1,433
1
23
25

score -1 · Answer 4 · answered Apr 28 '15 at 19:48

Ideally, you would simply remove the selected attribute from disabled options on the server side when generating the HTML document to begin with.

Otherwise, if you are using JQuery, this can be done fairly easily with:

$('#Category').find('option:not([disabled])').first().prop('selected', true);

Add this to your ondomready event handler. This will force the first non-disabled option to be selected for this select element regardless of its options' selected attributes. The disadvantage of this method is that it will prevent the selected attribute from being able to be used at all with this select element.

On the other hand, if you are trying to create category headers within a select element, you should consider using an optgroup element instead, since that is the correct semantic markup for this:

<select id="Category" name="Category">
    <optgroup label="Category">
        <option value="1">General Info</option>
        <option value="2">Booking</option>
        <option value="3">Auditions</option>
    </optgroup>
</select>

HTML make invalid

4 Answers4

HTML make