Make bootstrap-select dropdown required

Question

I have dropdown list in my form which used bootstrap-select to show the dropdown. I want to make if user submit the form it will check the dropdown is have value or not. I already added required inside the <select> tag but nothing happen if I leave it empty and press submit button.

This is my code :

<div class="form-group">
    <label for="location">Location</label>
    <select name="location" id="location-form" required>
       <option value="">Choose Location</option>
       <?php foreach($location as $row) : ?>
       <option value="<?=$row['location_id']?>"><?=$row['location_name']?></option>
       <?php endforeach; ?>
    </select>
</div>

How to make my select dropdown required and can validate it must filled in if user press submit button ? Thanks before.

i have checked example HTML in fiddle and It's working fine so can you please check your console which error you got when you submit your data and let me know so will help you better instead of direct answer. — Niket Joshi, Dec 26 '18 at 04:11
@NiketJoshi I have `An invalid form control with name='location' is not focusable.` in console when I clicked submit button. — Antonio, Dec 26 '18 at 04:20
@NiketJoshi No, I don't submit the form with ajax. Just standard form action post. — Antonio, Dec 26 '18 at 04:25
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/185770/discussion-between-niket-joshi-and-antonio). — Niket Joshi, Dec 26 '18 at 04:25

bronkula · Answer 1 · 2018-12-26T03:52:27.423

1

A select always has a value set into it. Try using a radio group instead.

Check here for more information on a radio group. HTML5: How to use the "required" attribute with a "radio" input field

edited Dec 26 '18 at 03:52

answered Dec 26 '18 at 03:44

bronkula

633
5
12

I already added `required` inside ` – Antonio Dec 26 '18 at 03:45
1

What do you mean using radio group ? LOL – Antonio Dec 26 '18 at 03:49
Currently your select has a value. it has a value of "". Try using an set of elements. They do not start selected, and adding required at least one of the inputs will require a click on one of them. – bronkula Dec 26 '18 at 03:51
So, I will have thousands radio if the value inside dropdown is a thousands too ? – Antonio Dec 26 '18 at 03:54
Well that seems like a bad move no matter what. Sounds like you would do better with a search at that point. – bronkula Dec 26 '18 at 03:55
If you must have thousands of radio buttons, try putting it in an element that has overflow auto and some height set on it. That way you can at least access everything, but they don't overpower your layout. – bronkula Dec 26 '18 at 03:57

score 1 · Answer 2 · answered Dec 26 '18 at 04:53

There is two way that helps me will share with you below.

Using this way also problem getting solved.

<form action="whatever" method="post" novalidate>

OR using this too please try following code.

/* For checking the drop-down contain value of not use this. */ 
if(jQuery('#location-form').val() == ''){ 
   alert('Please select the option for location'); 
}else{ 
  return false; 
}

I hope this will help you. Thanks.

score 1 · Answer 3 · answered Jul 06 '22 at 10:01

1

By using default bootstrap 4.* JS validations you can simply add to sezel

<select ... required="true">

and an empty option with value=""

<option value="">Select one</option>

In this way Bootstrap JS library check if is selected

answered Jul 06 '22 at 10:01

Domenico Monaco

1,236
12
21

score 0 · Answer 4 · answered Dec 26 '18 at 04:05

0

Add "disabled" in yout first option(along with required in select tag) as:

<div class="form-group"> <label for="location">Location</label> <select name="location" id="location-form" required> <option value="" disabled>Choose Location</option> <?php foreach($location as $row) : ?> <option value="<?=$row['location_id']?>"><?=$row['location_name']?></option> <?php endforeach; ?> </select> </div>

answered Dec 26 '18 at 04:05

Ayush Jain

337
3
10

If I added `disabled` it will remove **Choose Location**. I don't want to remove it. – Antonio Dec 26 '18 at 04:21
$( "#target" ).submit(function( event ) { alert( "Handler for .submit() called." ); event.preventDefault(); }); – Ayush Jain Dec 26 '18 at 04:29
In place of that alert, you can check value of the select tag and if you find nothing is selected, you can simply use preventDefaut() – Ayush Jain Dec 26 '18 at 04:30
preventDefault() will PREVENT your form from actual submission – Ayush Jain Dec 26 '18 at 04:30
one more thing, that 'target' is your form ID – Ayush Jain Dec 26 '18 at 04:35

score 0 · Answer 5 · answered Oct 21 '20 at 03:15

I am new to coding but I have done a lot of research on this site and I found a solution (not so efficient but works). This solution is based on the fact that the html5 "required" attribute worked at least somewhat - it prevents you from proceeding next or submitting but nothing else other than that - e.g. no error message, no alert, nothing at all.

The idea of the solution is to use the "invalid-feedback" class to show an error message, make use of the fact that it won't show until you pass in a "d-block" class. Then use a couple of functions on click of a button.

$('#button').click(function () {
  $('#id-error').hide(); //if there is indeed a html5 message showing, but it looks bad, then just hide it, if you inspect the msg, html has automatically generate this "id-error" id 
  if ($('#id').is(':disabled')){
      $('#errormsg-id').removeClass('d-block'); 
  } else if (!$('#id').val()){
      $('#errormsg-id').addClass('d-block');
  };
});

$('#id').change(function () {
  if($('#id').val()){
      $('#errormsg-id').removeClass('d-block');
  };
});

<div class="form-group ">
<select id="id" class="selectpicker" required>
<option >...</option>
</select>
<div id="errormsg-id" class="invalid-feedback ">Please make a selection.</div>
</div>

score 0 · Answer 6 · answered Jun 25 '21 at 16:41

This is PHP; however, for Angular (which is what I came here looking for), you could create a custom validator that checks if the <option value="">Choose Location</option> is selected. Inside the validator, you'd check the value of the control. If the control value is '', then you fail the validation.

This would work for both template driven and reactive forms.

Custom Validators in Angular

score -1 · Answer 7 · answered Dec 26 '18 at 03:57

-1

Have you put your select in form tag? If not try placing it inside form tag. Please refer - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_required

answered Dec 26 '18 at 03:57

SO19

105
9

1

Absolutely yes. I already put the `select` tag inside `form` tag. – Antonio Dec 26 '18 at 03:58

score -1 · Answer 8 · answered Dec 26 '18 at 04:36

If required is not working you can add java script validation as given below and replace "FormnameId" with your form tag id.

<script type="text/javascript">
$(document).on('submit','form#FormnameId',function(event){
 event.preventDefault();
 var sel = $("#location-form").val();
 if(sel == ''){
  alert('Please select value first');
  return false;
 }
});
</script>

Make bootstrap-select dropdown required

8 Answers8