The required attribute (HTML5) in the Select element does not work

Question

The required attribute (HTML5) in the Select element does not work

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I have a form in my laravel project, in which I want to validate certain fields, the fact is that I use the required HTML5 attribute, the thing is that it only works on the elements input in the select , however, one does not work ... it does not matter if it is a normal select or a select2.

Can someone tell me if there is any incompatibility with Laravel or something?

<select id="hola" name="hola" required>.
     <option value="" selected>
          Choose option
     </option>
     <option value="hello_world">
          Hello world!
     </option>
     <option value="goodbye_world">
          Goodbye world!
     </option>
</select>

In other projects this works perfectly, but I do not know if with laravel there is another way, without using validator, or JS Validate, or anything, I just want to use the HTML5 required.

Even if you remove the selected follow from the option , you still do the same, theoretically having value="" when doing submit should jump the same .

html5 select2

asked by RuralGalaxy 04.08.2016 в 14:13

source

2 answers

delete space from the names of a variable in r Do 3 different operations with a single C # button

score 2 · Answer 1

To add to Alberto's response, the documentation says:

A select element with a required attribute and without a multiple attribute, and whose size is "1", must have a option son.

The first option child element of a select element with a required attribute and without a multiple attribute and whose size is "1", must have a value attribute empty or must not have text content.

link

This translates into these possibilities of writing an empty field:

<select required aria-required="true" id="hola" name="hola">
  <option value="">Choose</option>
  ...
</select>

If you want to have the empty option:

<select required aria-required="true" id="hola" name="hola">
  <option>&nbsp;</option>
  ...
</select>

You can also use a space instead of  

score 1 · Answer 2

The problem you have is that the select always has a value, I explain:

If you put this:

<select id="hola" name="hola" required>
     <option value="hello_world" selected>
          Hello world!
     </option>
     <option value="goodbye_world">
          Goodbye world!
     </option>
</select>

You have put the first option always this select and in addition, you add a value, if you want the first option does not count as required, you have to remove the value, and also as it is set the first do not have to put selected, because it is going to exit by default. Example:

<select id="hola" name="hola" required>
     <option value="">
          Hello world!
     </option>
     <option value="goodbye_world">
          Goodbye world!
     </option>
</select>

I hope it works for you