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.

Answer 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

Answer 2

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.

Answer 3

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

Answer 4

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>

Answer 5

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>

Answer 6

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

Answer 7

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

Answer 8

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>