Bootstrap 5 Validation Server side

Last Updated : 30 Nov, 2022

Bootstrap 5 Validation Server side provides valuable, actionable feedback to your users by browser default behaviors or custom styles and JavaScript. If you are using server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid and add .invalid-feedback & .valid-feedback with these classes it is a supported class.

Bootstrap 5 Validation server-side classes:

is-valid: This class is used to create a valid color input field.
is-invalid: This class is used to create an invalid color input field.
invalid-feedback: This class is used to give invalid color text feedback.
valid-feedback: This class is used to give valid color text feedback.

Syntax:

<section>
     <input type=" " class="Validation server-side Class"required>
     <section class="Validation server-side Class">
                .........
     </section>
</section>

Example 1: In this example we will create two input fields with two feedback sections and all of them will be set as invalid.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" 
          href= 
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          crossorigin="anonymous"> 
</head> 
  
<body class= "m-3"> 
    <h1 class="text-success"> GeeksforGeeks </h1> 
    <h3>Bootstrap5 Validation Server side</h3> 
    
    <form class="row g-3"> 
        <section class="col-md-4"> 
            <label>First name</label> 
            <input type="text" 
                    class="form-control is-valid"> 
            <section class="invalid-feedback"> 
              Please enter your first name  
            </section> 
          </section> 
        <section class="col-md-4"> 
          <label>Last name</label> 
          <input type="text" 
                  class="form-control is-invalid"> 
                   
          <section class="invalid-feedback"> 
            Please enter your last name  
          </section> 
        </section> 
         
       <section class="col-12"> 
          <button class="btn btn-primary" 
                  type="submit"> 
            Submit form 
         </button> 
        </section> 
      </form> 
    
</body>  
</html>

Output:

Example 2: In this example we will put one input field, which will be valid and others will be invalid

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Bootstrap CDN -->
    <link rel="stylesheet"
          href= 
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" 
          crossorigin="anonymous"> 
  
</head> 
  
<body class="m-3"> 
    <h1 class="text-success"> GeeksforGeeks </h1> 
    <h3>Bootstrap5 Validation Server side</h3> 
    <form class="row g-3"> 
        <section class="col-md-4"> 
            <label>First name</label> 
            <input type="text" class="form-control is-valid" value="Geek"> 
            <section class="valid-feedback"> 
                Please enter your first name 
            </section> 
        </section> 
  
        <section class="col-md-4"> 
            <label>Last name</label> 
            <input type="text" class="form-control is-invalid"> 
            <section class="invalid-feedback"> 
                Please enter your last name 
            </section> 
        </section> 
        <section class="col-md-4"> 
            <label>Username</label> 
            <section class="input-group has-validation"> 
                <span class="input-group-text">@</span> 
                <input type="text" class="form-control is-invalid"> 
                <section class="invalid-feedback"> 
                    Enter your username. 
                </section> 
            </section> 
        </section> 
        <section class="col-md-4"> 
            <label>City</label> 
            <input type="text" class="form-control is-invalid"> 
            <section class="invalid-feedback"> 
                Please enter your City name 
            </section> 
        </section> 
        <section class="col-md-3"> 
            <label>State</label> 
            <select class="form-select is-invalid"> 
                <option selected disabled value="">Choose</option> 
                <option>bihar</option> 
                <option>U.P.</option> 
                <option>C.G.</option> 
            </select> 
            <section class="invalid-feedback"> 
                select a valid state. 
            </section> 
        </section> 
  
        <section class="col-12"> 
            <section class="form-check"> 
                <input class="form-check-input is-invalid" 
                       type="checkbox"
                       value="" 
                       id="name6" 
                       required> 
                <label class="form-check-label"> 
                    Agree to terms and conditions 
                </label> 
                <section class="invalid-feedback"> 
                    You must agree before submitting. 
                </section> 
            </section> 
        </section> 
        <section class="col-12"> 
            <button class="btn btn-primary" type="submit"> 
                Submit form 
            </button> 
        </section> 
    </form> 
  
</body> 
  
</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/forms/validation/#server-side

Suggest improvement

Bootstrap 5 Validation Tooltips

Bootstrap 5 Validation Supported Elements

Share your thoughts in the comments

Forms

Form controls

Form Select

Form Checks and radios

Form Range

Form Input group

Form Floating labels

Form Validation

Forms

Form controls

Form Select

Form Checks and radios

Form Range

Form Input group

Form Floating labels

Form Validation

Bootstrap 5 Validation Server side

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?