CODEWITHSUNDEEP
jqueryhtmljquery-validateselectlist
Cairns80
Cairns80

Reputation: 9

Dropdown required field

I have a contact form which has a range of optional and required fields. One of the required fields is a drop-down. It looks like this:

<div>
    <select name="favFruit[]" size="1" required>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="plum">Plum</option>
        <option value="pomegranate">Pomegranate</option>
        <option value="strawberry">Strawberry</option>
        <option value="watermelon">Watermelon</option>
    </select>
</div>

jfiddle

I am using jQuery to validate all required fields and it works fine. Except this field always shows up as having been already completed by the user because the drop-down always displays the first option as default. So the user can simply leave this dropdown untouched and jQuery assumes the form has been filled with the first choice and validates.

So I made a simple change to the form to leave the first field blank by adding

<option value=""></option>

You can find a working example here: jfiddle

Now this shows as blank until the user chooses an option from the dropdown. The problem is that I know this is not semantically correct as W3C Validator doesn't like it, stating

Error: Element option without attribute label must not be empty.

What's the correct way to do this so that it forces the user to actually make a choice and conforms to correct mark-up?

Upvotes: 1

Views: 1374

Answers (1)

Paweł Smołka
Paweł Smołka

Reputation: 638

I had similar issue with materializecss.

So what I made I gave first option to it as u write but in such way:

<option value="" disabled> Make a choice:

User knows he must pick sth and you may check if its empty. Still you can detect it with jquery and not let it be validated.

Upvotes: 0

Related Questions