Bootstrap 5 form, required select field for submit | Make Bootstrap dropdown/select required?

Question

i need the required for the select field in form.

Is it possible with bootstrap 5 or html

to submit the form you have to select A or B, like you have to use the message field

<!doctype html>
<html lang="en">
  <head>    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
<div class="container bg-light">
    <div class="row">
            <form method="post">
            <div class="col-sm-12">
                <select class="form-select" required="required">
                    <option selected>Select:</option>
                    <option value="1" >A</option>
                    <option value="2" >B</option>
                </select>
            </div>
            <div class="col-sm-12">
              <label for="message" class="form-label"><b>Message</b></label>
              <input type="text" class="form-control" id="message" name="message" required>
            </div>          
            <button class="w-100 btn btn-primary btn-lg" type="submit"><b>Submit</b></button>
            
            </form>
       </div>
    </div>   

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>

<select class="form-selec" required="required">
 <option selected>Select:</option>
 <option value="1" >A</option>
 <option value="2" >B</option>
</select>

<select class="form-select" required>
 <option selected>Select:</option>
 <option value="1" >A</option>
 <option value="2" >B</option>
</select>

<select class="form-select" required>
 <option selected disabled>Select:</option>
 <option value="1" >A</option>
 <option value="2" >B</option>
</select>

I found this post but dont fit.

How to make a Bootstrap dropdown required?

UPDATE:

from this post, only this works.

<select class="form-select" required="required">
 <option value="">Select:</option>
 <option value="1" >A</option>
 <option value="2" >B</option>
</select>

I need an option field with empty value.

score 1 · Answer 1 · answered Apr 25 '22 at 13:54

<!doctype html>
<html lang="en">
   <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
<body>
  <div class="container bg-light">
     <div class="row">
        <form method="post">
           <div class="col-sm-12">
              <select class="form-select" name="A" id="A" required>
                 <option value="">Select</option>
                 <option value="A">A</option>
                 <option value="B">B</option>
              </select>
           </div>
           <div class="col-sm-12">
              <label for="message" class="form-label"><b>Message</b></label>
              <input type="text" class="form-control" id="message" name="message" required>
           </div>
           <button class="w-100 btn btn-primary btn-lg" type="submit"><b>Submit</b></button>
        </form>
     </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

Try this it will work

score 1 · Answer 2 · answered Aug 27 '22 at 13:48

You need always the first option field with an empty value inside in your select tag with the required option inside.Now you have to select one option or you can't submit your form, and you will see an error message.

...
<option value="">this is your standard text</option>
...

<select class="form-select" required="required">
 <option value="">Select your option:</option>
 <option value="String" >Value A</option>
</select>

Bootstrap 5 form, required select field for submit | Make Bootstrap dropdown/select required?

2 Answers2