How to make a Bootstrap dropdown required?

Question

So, I've got following code for a dropdown box made with bootstrap:

<div class="btn-group">
    <button id="landKapitein" type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Land
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a role="menuitem" tabindex="-1" href="#">België/Belgique</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">Deutschland</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">France</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">Nederland</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">United Kingdom</a></li>
     </ul>
</div>

Now I want to make it required to select something from this dropdown box before you can continue on. I've already done this for textboxes and radio buttons by just adding required to the tag, but I don't have a tag like that here, so how do I do this then?

Instead of using the `select` element as @samuelms suggested, did you find another solution? — John, Dec 30 '15 at 13:45

score 39 · Answer 1 · answered Aug 18 '16 at 04:12

If we just put required in select tag and <option value="">None</option> in the option it will work for validation. I have refer this page.

It works for selection must be made among provided value.

But I would like to know how to write custom validation message coming by default like this message.?

 <form action="demo_form.asp">
    <select required>
      <option value="">None</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <input type="submit">
    </form>

Above code works fine for validation like "Selecting an item in the list before submit".

I'm unsure what Bootstrap version you're using but if you put "required" in your 'select' and then put in your dropdown, you will get what you are asking for. — McAuley, Aug 29 '18 at 23:12

score 3 · Answer 2 · edited Jul 10 '18 at 06:32

3

Use this code if you want to required Bootstrap drop down select

<select id='terms' class='form-control' required>
    <option selected disabled>Select </option>
    <option value="Y">Yes</option>
    <option value="N">No</option>
</select>

edited Jul 10 '18 at 06:32

alexander.polomodov

5,396
14
39
46

answered Jul 10 '18 at 06:12

alok

31
1

While this code may answer the question, providing information on how and why it solves the problem improves its long-term value – L_J Jul 10 '18 at 06:27

score 2 · Answer 3 · edited May 23 '17 at 12:18

2

Could you just use a select element instead and apply required to its tag?

<select class="form-control" required>
    <option>België/Belgique</option>
    <option>Deutschland</option>
    <option>France</option>
    <option>Nederland</option>
    <option>United Kingdom</option>
</select>

See this SO question in particular.

edited May 23 '17 at 12:18

Community

1
1

answered Mar 08 '15 at 15:41

SamuelMS

1,116
1
11
22

2

You have to change the styling of the `select` element in order to get the same styling as the bootstrap's way of using a button and a list. Which might not be what you want to do. – John Dec 30 '15 at 13:44
If one wants to use ui.bootstrap.dropdown then select, option is a no go. Can it be done together with ui.bootstrap.dropdown? – Tomo Jul 27 '17 at 14:20

score 1 · Answer 4 · edited Aug 19 '19 at 16:56

In CSS:

.btn.btn-default.dropdown-toggle.is-invalid {
  border-color: #dc3545;
}

In HTML:

<input type="hidden" class="form-control"  name="idType" required />
<div class="btn-group">
    <button id="landKapitein" type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Land
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a role="menuitem" tabindex="-1" href="#">België/Belgique</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">Deutschland</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">France</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">Nederland</a></li>
        <li><a role="menuitem" tabindex="-1" href="#">United Kingdom</a></li>
     </ul>
</div>

In JavaScript: set the value of the input field on selecting the dropdown.

score 0 · Answer 5 · answered May 10 '18 at 08:38

0

<select class="form-control" required="required">
 <option>A</option>
 <option>A</option>
 <option>A</option>
</select>

please set required = "required" in your selector

answered May 10 '18 at 08:38

Mihiraj Madhusanka

50
1

How to make a Bootstrap dropdown required?

5 Answers5

Linked