bootstrap
  1. bootstrap-form-validation
PreviousNext

Bootstrap Form Validation

Bootstrap provides built-in validation styles that can be used to validate form inputs.

Syntax

To use Bootstrap's validation styles, add the was-validated class to the form element, and add the required attribute to the inputs that are required.

<form class="was-validated">
  <div class="form-group">
    <label for="inputName">Name</label>
    <input type="text" class="form-control" id="inputName" placeholder="Enter name" required>
  </div>
  <div class="form-group">
    <label for="inputEmail">Email address</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Enter email" required>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Example

Here is an example of using Bootstrap's form validation.

<form class="row g-3">
    <div class="col-4">
        <label for="validationDefault01" class="form-label">First name</label>
        <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-4">
        <label for="validationDefault02" class="form-label">Last name</label>
        <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
    <div class="col-4">
        <label for="validationDefaultUsername" class="form-label">Username</label>
        <div class="input-group">
            <span class="input-group-text" id="inputGroupPrepend2">@</span>
            <input type="text" class="form-control" id="validationDefaultUsername"
                aria-describedby="inputGroupPrepend2" required>
        </div>
    </div>
    <div class="col-6">
        <label for="validationDefault03" class="form-label">City</label>
        <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-3">
        <label for="validationDefault04" class="form-label">State</label>
        <select class="form-select" id="validationDefault04" required>
            <option selected disabled value="">Choose...</option>
            <option>...</option>
        </select>
    </div>
    <div class="col-3">
        <label for="validationDefault05" class="form-label">Zip</label>
        <input type="text" class="form-control" id="validationDefault05" required>
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
            <label class="form-check-label" for="invalidCheck2">
                Agree to terms and conditions
            </label>
        </div>
    </div>
    <div class="col-12">
        <button class="btn btn-primary" type="submit">Submit form</button>
    </div>
</form>
Try Playground

Custom styles

For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your

. 

<form class="row g-3 needs-validation" novalidate>
    <div class="col-4">
        <label for="validationCustom01" class="form-label">First name</label>
        <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
        <div class="valid-feedback">
            Looks good!
        </div>
    </div>
    <div class="col-4">
        <label for="validationCustom02" class="form-label">Last name</label>
        <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
        <div class="valid-feedback">
            Looks good!
        </div>
    </div>
    <div class="col-4">
        <label for="validationCustomUsername" class="form-label">Username</label>
        <div class="input-group has-validation">
            <span class="input-group-text" id="inputGroupPrepend">@</span>
            <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend"
                required>
            <div class="invalid-feedback">
                Please choose a username.
            </div>
        </div>
    </div>
    <div class="col-6">
        <label for="validationCustom03" class="form-label">City</label>
        <input type="text" class="form-control" id="validationCustom03" required>
        <div class="invalid-feedback">
            Please provide a valid city.
        </div>
    </div>
    <div class="col-3">
        <label for="validationCustom04" class="form-label">State</label>
        <select class="form-select" id="validationCustom04" required>
            <option selected disabled value="">Choose...</option>
            <option>...</option>
        </select>
        <div class="invalid-feedback">
            Please select a valid state.
        </div>
    </div>
    <div class="col-3">
        <label for="validationCustom05" class="form-label">Zip</label>
        <input type="text" class="form-control" id="validationCustom05" required>
        <div class="invalid-feedback">
            Please provide a valid zip.
        </div>
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
            <label class="form-check-label" for="invalidCheck">
                Agree to terms and conditions
            </label>
            <div class="invalid-feedback">
                You must agree before submitting.
            </div>
        </div>
    </div>
    <div class="col-12">
        <button class="btn btn-primary" type="submit">Submit form</button>
    </div>
</form>
Try Playground

Explanation

In the code above, we used the was-validated class to indicate that the form should be validated. We added the required attribute to the inputs that are required.

To display error messages when the form is submitted with invalid inputs, we used the invalid-feedback class, which displays a message below the invalid input.

Bootstrap also provides additional validation styles such as valid-feedback, which indicates a valid input, and is-valid, which applies a green highlight to the validated input.

Use

Bootstrap's form validation can be used to validate form inputs, ensure that users provide the required inputs, and improve the user experience by providing error messages and highlighting invalid inputs.

Important Points

  • Bootstrap provides built-in validation styles for form inputs.
  • To use Bootstrap's validation styles, add the was-validated class to the form element, and add the required attribute to the inputs that are required.
  • Use the invalid-feedback class to display error messages when the form is submitted with invalid inputs.
  • Bootstrap also provides additional validation styles such as valid-feedback and is-valid.

Summary

Bootstrap's form validation can help improve user experience by providing error messages for invalid form inputs. By using Bootstrap's validation styles, you can easily validate and improve the usability of your forms.

Form LayoutFlex
Published on: