Open In App

Bootstrap 5 Validation Supported Elements

Last Updated : 10 Feb, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Validation is supported by various elements present in the form and you can use it to make sure the user knows about which field is mandatory. The different elements in the form group which are supported are:

  • <input>s and <textarea>s with .form-control
  • <select>s with .form-select
  • .form-checks

Bootstrap 5 Validation Supported elements syntax:

<input class="form-control" type="..." 
        id="..." required>
<div class="invalid-feedback">
    ...
</div>

Bootstrap 5 Validation Supported elements used classes:

  • invalid-feedback: This class is used to give feedback when the input is not valid or there is no input in red color.

Bootstrap 5 Validation Supported elements used attributes:

  • required: This attribute is needed to be added with the input tag which makes the input element mandatory.

Example 1: The code below demonstrates how the validation can be applied on input fields and checks and switches:

HTML




<!doctype html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
    </script>
      <title>Bootstrap 5 Validation Supported elements</title>
</head>
 
<body>
    <h1 class="ms-4 text-success">
          GeeksforGeeks
      </h1>
    <h4 class="ms-4 mb-2">
          Bootstrap 5 Validation Supported elements
      </h4>
    <h5 class="m-4 text-success">
          Fill in the Form:
      </h5>
    <div class="container m-2">
        <form class="was-validated">
            <div class="mb-3">
                <label for="textInput" class="form-label">
                      Enter your name:
                  </label>
                <input class="form-control" type="text"
                       id="textInput" required>
                <div class="invalid-feedback">
                    Please enter valid name above.
                </div>
            </div>
            <div class="row">
                <p class="text-muted">
                      Choose the technologies you want to learn:
                  </p>
                <div class="col-6">
                    <div class="form-check m-2">
                        <input class="form-check-input"
                               type="checkbox" id="defaultCheckbox1"
                               autocomplete="off" required>
                        <label class="form-check-label"
                               for="defaultCheckbox1">
                             Data Structures
                        </label>
                        <div class="invalid-feedback">
                              It is compulsory to check this.
                          </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-check m-2">
                        <input class="form-check-input"
                               type="checkbox" id="checkedCheckbox1"
                               autocomplete="off" checked required>
                        <label class="form-check-label"
                               for="checkedCheckbox1">
                               Algorithms</label>
                        <div class="invalid-feedback">
                              It is compulsory to check this.
                          </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <div class="form-check form-switch m-2">
                        <input class="form-check-input"
                               type="checkbox" id="defaultCheckbox2"
                               autocomplete="off" required>
                        <label class="form-check-label"
                               for="defaultCheckbox2">
                            HTML
                          </label>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-check form-switch m-2">
                        <input class="form-check-input"
                               type="checkbox" id="checkedCheckbox2"
                               autocomplete="off" checked required>
                        <label class="form-check-label"
                               for="checkedCheckbox2">
                            CSS
                          </label>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
</html>
 






                        










Output:


 


Example 2: The code below demonstrates how the validation doesn’t work with disabled inputs:




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!doctype html>


<html lang="en">


<head>


    <link href=


"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"


          rel="stylesheet">


    <script src=


"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">


    </script>


  <title>Bootstrap 5 Validation Supported elements</title>


</head>


 


<body>


    <h1 class="ms-4 text-success">


        GeeksforGeeks


      </h1>


    <h4 class="ms-4 mb-2">


          Bootstrap 5 Validation Supported elements


      </h4>


    <h5 class="m-4 text-success">


          Fill in the Form:


      </h5>


    <div class="container m-2">


        <form class="was-validated">


            <div class="mb-3">


                <label for="textInput" class="form-label">


                      Enter your name:


                  </label>


                <input class="form-control" type="text"


                       id="textInput" required>


                <div class="invalid-feedback">


                    Please enter valid name above.


                </div>


            </div>


            <div class="mb-3">


                <label for="emailInput" class="form-label">


                      Email address (This is Disabled):


                  </label>


                <input type="email" class="form-control"


                       id="emailInput" placeholder="Disabled"


                       disabled required>


                <div class="invalid-feedback">


                    Please enter an email above.


                </div>


            </div>


            <div class="mb-3">


                <label for="validTextarea"


                       class="form-label">


                      Textarea


                  </label>


                <textarea class="form-control" id="validTextarea"


                          placeholder="Required example textarea"


                          required>


                  </textarea>


                <div class="invalid-feedback">


                    Please enter some text in the textarea.


                </div>


            </div>


        </form>


    </div>


</body>


</html>



















                        







                        










Output:


 


Reference: https://getbootstrap.com/docs/5.0/forms/validation/#supported-elements 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Validation Tooltips
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Validation Tooltips
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Navbar Supported Content
            

        
    
        
            

                Explain the types of lists supported by Bootstrap
            

        
    
        
            

                How to check the OffScreenCanvas is supported by the Browser or not ?
            

        
    
        
            

                How to detect HTML 5 <canvas>  is not supported by JavaScript ?
            

        
    
        
            

                How to detect HTML 5 is supported or not in the browser ?
            

        
    
        
            

                Which media format is supported by the browser in HTML ?
            

        
    
        
            

                Foundation CSS Flexbox Mode Supported Components
            

        
    
        
            

                How to check if CSS property is supported in browser using JavaScript ?
            

        
    
        
            

                What are different video formats supported by browsers in HTML ?
            

        
    
        
            

                Next.js Supported Browsers and Features
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
T

        

            
        

        

                                    


                                    

                                        triashabiswas                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox