Required function is not working in HTML form

Question

I already apply <Required> tag in HTML <Select> but not working. The form is still able to proceed to the next step even not select anything at first step. Anyone know to solve it?

    <label>Region :</label>
    <select id="Region" class="custom-select form-control" required>
    <option value="">Select Region</option>
    <option value="central" id="Central">Central</option>
    <option value="northern" id="Northern">Northern</option>
    </select>

I expect this is due to `Select Region` being selected by default because it has a non-value. As far as the form is concerned it is a valid option and therefore the `required` indicator has been satisfied — Martin, May 23 '19 at 15:59
So how to make the selection is deselect by default? Any idea? :-) — mastersuse, May 23 '19 at 16:03
I suggest you use form validation and Javascript to validate the input before it's submitted. Like Martin says above, the 'required' indicator is satisfied when 'Select Region' is selected by default. — craig1231, May 23 '19 at 16:03
Maybe you could replace the "Select Region" with a label instead of giving it no value as Martin says it auto-satisfies by default. — Compiler v2, May 23 '19 at 16:06
No, I mean putting the label on top of the dropdown, like a header telling the user what the dropdown is about. — Compiler v2, May 23 '19 at 23:33
Technical nit-pcik, there is no required **tag** it is an **attribute** — Jon P, May 23 '19 at 23:46
Your code works.... at least in chrome : https://jsfiddle.net/y4j6rmdL/ . Have you tested in multiple browsers? Is it browser specific? Note you **need** `form` tag as the `required` attribute pertains to **form validation** — Jon P, May 23 '19 at 23:51
... however you can still get CSS working without the `form` tag : https://jsfiddle.net/y4j6rmdL/ . Basically we need more information from you. Create a [mcve] that adequately demonstrates the problem. Is this purely a javascript construct? Is the form actually submitted or is this more a multi-step form. — Jon P, May 24 '19 at 00:04
[This answer](https://stackoverflow.com/a/48267035/4665) may also be of interest to you — Jon P, May 24 '19 at 00:12

score 0 · Answer 1 · answered May 23 '19 at 16:11

Have you declared your web page using HTML5? Make sure you declare the following statement at the beginning of the page

<!DOCTYPE html>

The required attribute is only available in HTML5 and only supported by specific browsers... w3schools Required Attribute

Having tested your original code in HTML5, it works.

Compiler v2 · Answer 2 · 2019-05-23T23:24:41.403

0

You could get rid of the select option tag entirely, and place the value select option in the select tag itself.

<label>Region:</label>
<select value="Select Option" id="Region" class="custom-select form- control" required>

<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>

edited May 23 '19 at 23:24

answered May 23 '19 at 16:11

Compiler v2

3,509
10
31
55

I also have tried `` but the `Select Region` is still selected by default. – mastersuse May 23 '19 at 16:35
Are you able to to make it a label instead of putting it into the dropdown? Would that be good? Because it seems pointless to worry about something that small when you could just prompt the user via a label. Not to be critical. – Compiler v2 May 23 '19 at 23:18

score 0 · Answer 3 · answered May 23 '19 at 23:35

Your code works it depends on the browser you use or the way that you are using it. I wrote a sample code for you. Hope it may help you:

<!DOCTYPE html>
<html>
<body>
<form >
 <label>Region :</label>
    <select id="Region" class="custom-select form-control" required>
    <option value="">Select Region</option>
    <option value="central" id="Central">Central</option>
    <option value="northern" id="Northern">Northern</option>
    </select>
  <input type="submit">
</form>
</body>
</html>

So in the code above if you do not choose anything it will not let you submit.

Required function is not working in HTML form

3 Answers3