CODEWITHSUNDEEP
javascriptphpformsvalidation
Jibin
Jibin

Reputation: 464

<select> required not working

I'am using this code along with php code for a select and used required class to make it mandatory but it is not working. Does anyone can help me.I have included this html section along with php code.

 <select name="category" required="required" class="form-control">
        <option value=" ">--Select Category--</option>
        <option value="asd">asd</option>
    </select>

Upvotes: 14

Views: 41352

Answers (6)

Dani Amsalem
Dani Amsalem

Reputation: 1616

In my case, the required attribute on the select element wasn't working because the first option element had the selected attribute added.

selected attribute broke the required attribute

<label for="procedures_of_interest">Procedures Of Interest</label>
<select name="procedures_of_interest" id="procedures_of_interest" required multiple="multiple">
  <option value="" selected disabled>Select One or More</option>
  <option value="first">first</option>
  <option value="second">second</option>
  <option value="last">last</option>
</select>

By removing the the selected attribute from the option element, the required and multiple attributes both worked correctly on the select element:

<label for="procedures_of_interest">Procedures Of Interest</label>
<select name="procedures_of_interest" id="procedures_of_interest" required multiple="multiple">
  <option value="" disabled>Select One or More</option>
  <option value="first">first</option>
  <option value="second">second</option>
  <option value="last">last</option>
</select>

Upvotes: 1

Bilal Yaqoob
Bilal Yaqoob

Reputation: 998

You have to add required and value attributes

<select required="true" name="unit">
<option disabled selected value="">-- Select One --</option>
<option>Square Feet</option>
<option>Square Yards</option>
<option>Square Meters</option>
<option>Marla</option>
<option>Kanal</option>

Upvotes: 3

sensorario
sensorario

Reputation: 21620

First of all, replace

 <option value=" ">--Select Category--</option>

with

 <option value="">--Select Category--</option>

And then, as w3c says, ... "The required attribute is a boolean attribute. When specified, the element is required."

 <select name="category" required class="form-control">
     <option value="">--Select Category--</option>
     <option value="asd">asd</option>
 </select>

Also here you can find same example.

And here you can try the code.

Required is working. The fact is that " " is a value and "" is not.

Upvotes: 15

Akansh Braj
Akansh Braj

Reputation: 94

You are using required only which is HTML5 validation, may be its not work on all browser. Is you are looking for the proper validation i suggest to with jquery validation. Validation Document

Upvotes: 0

Adhan Timothy Younes
Adhan Timothy Younes

Reputation: 570

Try to remove space value in your select category option

<select name="category" required="required" class="form-control">
    <option value="">--Select Category--</option>
    <option value="asd">asd</option>
</select> code here

Upvotes: 29

OmerM25
OmerM25

Reputation: 253

Try changing the required part to true

So it'll be like required="true", did it work?

Upvotes: 0

Related Questions