Bootstrap 5 | Html form, required select field for submit | Make Bootstrap select required?-CodePudding

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
<div >
    <div >
            <form method="post">
            <div >
                <select  required="required">
                    <option selected>Select:</option>
                    <option value="1" >A</option>
                    <option value="2" >B</option>
                </select>
            </div>
            <div >
              <label for="message" ><b>Message</b></label>
              <input type="text"  id="message" name="message" required>
            </div>          
            <button  type="submit"><b>Submit</b></button>
            
            </form>
       </div>
    </div>   

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

  </body>
</html>

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

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

<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  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.

CodePudding user response：

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
<body>
  <div >
     <div >
        <form method="post">
           <div >
              <select  name="A" id="A" required>
                 <option value="">Select</option>
                 <option value="A">A</option>
                 <option value="B">B</option>
              </select>
           </div>
           <div >
              <label for="message" ><b>Message</b></label>
              <input type="text"  id="message" name="message" required>
           </div>
           <button  type="submit"><b>Submit</b></button>
        </form>
     </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

Try this it will work