Can I apply the required attribute to select fields in HTML5

Question

How can I check if a user has selected something from a  lt select gt  field in HTML5     I see  lt select gt  doesn t support the new required attribute    do I have to use JavaScript then  Or is there something I   m missing

User · Answer

Make the value of first item of selection box to blank.

So when every you post the FORM you get blank value and using this way you would know that user hasn't selected anything from dropdown.

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>

User · Answer

try this  this gonna work  I have tried this and this works    lt  DOCTYPE html gt   lt html gt   lt body gt    lt form action     gt   lt select required gt     lt option value    gt None lt  option gt     lt option value  volvo  gt Volvo lt  option gt     lt option value  saab  gt Saab lt  option gt     lt option value  mercedes  gt Mercedes lt  option gt     lt option value  audi  gt Audi lt  option gt   lt  select gt   lt input type  submit  gt   lt  form gt    lt  body gt   lt  html gt

User · Answer

Yes  it s working    lt select name  somename  required gt        lt option value    gt Please select lt  option gt        lt option value  one  gt One lt  option gt   lt  select gt    you have to keep first option blank

User · Answer

You need to set the value attribute of option to the empty string    lt select name  status  required gt       lt option selected disabled value    gt what s your status  lt  option gt       lt option value  code  gt coding lt  option gt       lt option value  sleep  gt sleeping lt  option gt   lt  select gt    select will return the value of the selected option to the server when the user presses submit on the form  An empty value is the same as an empty text input -  raising the required message     w3schools     The value attribute specifies the value to be sent to a server when a form is submitted       Example

User · Answer

Works perfectly fine if the first option s value is null  Explanation   The HTML5 will read a null value on button submit  If not null  value attribute   the selected value is assumed not to be null hence the validation would have worked i e by checking if there s been data in the option tag  Therefore it will not produce the validation method  However  i guess the other side becomes clear  if the value attribute is set to null ie  value         HTML5 will detect an empty value on the first or rather the default selected option thus giving out the validation message  Thanks for asking  Happy to help  Glad to know if i did

User · Answer

The  lt select gt  element does support the required attribute  as per the spec    http   dev w3 org html5 spec-author-view the-select-element html the-select-element   Which browser doesn   t honour this    Of course  you have to validate on the server anyway  as you can   t guarantee that users will have JavaScript enabled

User · Answer

first you have to assign blank value in first option  i e  Select here than only required will work

User · Answer

lt form action    gt    lt select required gt      lt option selected disabled value    gt choose lt  option gt     lt option value  red  gt red lt  option gt     lt option value  yellow  gt yellow lt  option gt     lt option value  green  gt green lt  option gt     lt option value  grey  gt grey lt  option gt    lt  select gt   lt input type  submit  gt   lt  form gt

User · Answer

Try this    lt select gt   lt option value    style  display none  gt Please select lt  option gt   lt option value  one  gt One lt  option gt   lt  select gt

User · Answer

In html5 you can do using the full expression    lt select required  required  gt    I don t know why the short expression doesn t work  but try this one  It will solve

User · Answer

You can use the selected attribute for the option element to select a choice by default   You can use the required attribute for the select element to ensure that the user selects something     In Javascript  you can check the selectedIndex property to get the index of the selected option  or you can check the value property to get the value of the selected option   According to the HTML5 spec  selectedIndex  returns the index of the first selected item  if any  or -1 if there is no selected item   And value  returns the value of the first selected item  if any  or the empty string if there is no selected item    So if selectedIndex   -1  then you know they haven t selected anything    lt button type  button  onclick  displaySelection    gt What did I pick  lt  button gt   lt script gt      function displaySelection                 var mySelect   document getElementById  someSelectElement            var mySelection   mySelect selectedIndex          alert mySelection          lt  script gt

User · Answer

Mandatory  Have the first value empty - required works on empty values     Prerequisites  correct html5 DOCTYPE and a named input field   lt select name  somename  required gt   lt option value    gt Please select lt  option gt   lt option value  one  gt One lt  option gt   lt  select gt    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

User · Answer

You can do it also dynamically with JQuery  Set required      select1   attr  required    required      Remove required      select1   removeAttr  required

[javascript] Can I apply the required attribute to <select> fields in HTML5?

Examples related to javascript

Examples related to html

Examples related to select

Examples related to required

Examples related to ui-select2