Prev Next

BS5 Form Validation

Bootstrap 5 provides built-in form validation styles to indicate valid or invalid input using classes like .is-valid and .is-invalid.

Key Topics

Basic Validation

Apply validation classes .is-valid or .is-invalid to indicate valid or invalid inputs.

<form class="was-validated">
    <div class="mb-3">
        <label for="validationInput1" class="form-label">Valid input</label>
        <input type="text" class="form-control is-valid" id="validationInput1" value="Valid value" required>
        <div class="valid-feedback">
            Looks good!
        </div>
    </div>
    <div class="mb-3">
        <label for="validationInput2" class="form-label">Invalid input</label>
        <input type="text" class="form-control is-invalid" id="validationInput2" required>
        <div class="invalid-feedback">
            Please provide a valid value.
        </div>
    </div>
</form>

Explanation: Use .is-valid for valid inputs and .is-invalid for invalid inputs to provide immediate visual feedback.

Server-side Validation

Implement server-side validation by applying validation classes dynamically based on server responses.

<form class="was-validated" novalidate>
    <div class="mb-3">
        <label for="serverValidationInput" class="form-label">Server-side validation input</label>
        <input type="text" class="form-control is-valid" id="serverValidationInput" required>
        <div class="valid-feedback">
            Server validated this input.
        </div>
    </div>
</form>

Explanation: Use the was-validated class and dynamically apply .is-valid or .is-invalid based on server-side validation.

Custom Validation Feedback

Provide custom feedback messages for valid or invalid inputs.

<form class="was-validated" novalidate>
    <div class="mb-3">
        <label for="customValidationInput" class="form-label">Custom validation input</label>
        <input type="text" class="form-control" id="customValidationInput" required>
        <div class="invalid-feedback">
            Please enter your username.
        </div>
    </div>
</form>

Explanation: Use .invalid-feedback or .valid-feedback to display custom feedback messages.

Complete Form Validation Example

Below is a complete example showcasing various validation techniques for form inputs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Form Validation Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Form Validation</h2>
        <form class="was-validated" novalidate>
            <div class="mb-3">
                <label for="validationExample1" class="form-label">Valid input</label>
                <input type="text" class="form-control is-valid" id="validationExample1" value="Valid value" required>
                <div class="valid-feedback">Looks good!</div>
            </div>
            <div class="mb-3">
                <label for="validationExample2" class="form-label">Invalid input</label>
                <input type="text" class="form-control is-invalid" id="validationExample2" required>
                <div class="invalid-feedback">Please provide a valid value.</div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates both client-side and server-side validation techniques with appropriate feedback messages.

Key Takeaways

  • Use .is-valid and .is-invalid classes to indicate valid or invalid inputs.
  • Add .valid-feedback and .invalid-feedback for custom feedback messages.
  • Combine the was-validated class with dynamic validation for better user experience.
Prev Next