jquery - Dropdown required field -

i have contact form has range of optional , required fields. 1 of required fields drop-down. looks 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 using jquery validate required fields , works fine. except field shows having been completed user because drop-down displays first option default. user can leave dropdown untouched , jquery assumes form has been filled first choice , validates.

so made simple change form leave first field blank adding

<option value=""></option> 

you can find working example here: jfiddle

now shows blank until user chooses option dropdown. problem know not semantically correct w3c validator doesn't it, stating

error: element option without attribute label must not empty.

what's correct way forces user make choice , conforms correct mark-up?

i had similar issue materializecss.

so made gave first option u write in such way:

<option value="" disabled> make choice: 

user knows must pick sth , may check if empty. still can detect jquery , not let validated.