CODEWITHSUNDEEP
javascripthtmlbootstrap-selectbootstrap-selectpicker
Antonio
Antonio

Reputation: 765

Make bootstrap-select dropdown required

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.

Upvotes: 3

Views: 16354

Answers (8)

Domenico Monaco
Domenico Monaco

Reputation: 1236

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

Upvotes: 1

Travis L. Riffle
Travis L. Riffle

Reputation: 144

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

Upvotes: 0

Tony
Tony

Reputation: 41

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>

Upvotes: 0

Niket Joshi
Niket Joshi

Reputation: 738

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.

Upvotes: 1

Kishan
Kishan

Reputation: 793

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>

Upvotes: -1

Ayush Jain
Ayush Jain

Reputation: 349

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>

Upvotes: 0

SO19
SO19

Reputation: 115

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

Upvotes: -1

bronkula
bronkula

Reputation: 652

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

Upvotes: 1

Related Questions