❮ Previous Next ❯

Forms Implementation

  • Implement and validate Bootstrap forms within a real project.

  • Why Forms Implementation Is Critical in Projects

    In real projects, forms are not optional UI elements.
    They are often the main interaction point between users and the system.

    Examples:

    • Contact forms

    • Login & signup forms

    • Feedback forms

    • Admin data entry forms

    A form that:

    • Looks good but validates poorly

    • Works but confuses users

    will fail in real usage.

    Projects built with Bootstrap must combine:

    • Proper validation logic

    • Clear visual feedback

    • User-friendly error messages

      Role of Bootstrap in Form Validation

      Important concept:

      Bootstrap does NOT validate data
      Bootstrap only styles validation states

      Bootstrap helps by providing:

      • Validation classes (.is-valid, .is-invalid)

      • Feedback containers (.valid-feedback, .invalid-feedback)

      • Consistent UI for errors and success states

      Actual validation comes from:

      • HTML5 validation rules

      • JavaScript logic

    • Form Validation Using Bootstrap

      Types of Validation Used in Projects

      Client-Side Validation

      • Runs in the browser

      • Provides instant feedback

      • Improves user experience

      Server-Side Validation

      • Runs on the backend

      • Ensures security

      • Final authority

      In this project lesson, we focus on client-side validation using Bootstrap, which every frontend developer must implement.

    Disable Default Browser Validation

    Use novalidate with the needs-validation class to disable default browser validation and apply custom Bootstrap validation. 

    <form class="needs-validation" novalidate>

    • Explanation:

      • novalidate → disables browser alert messages

      • .needs-validation → enables Bootstrap validation workflow

    Form Validation Example (HTML + JavaScript)

    Use Bootstrap validation classes with a small JavaScript script to show custom validation messages for form inputs. 

    <form class="needs-validation" novalidate>
  <div class="mb-3">
    <label class="form-label">Email address</label>
    <input type="email" class="form-control" required>
    <div class="invalid-feedback">
      Please enter a valid email address.
    </div>
  </div>

  <div class="mb-3">
    <label class="form-label">Password</label>
    <input type="password" class="form-control" required minlength="6">
    <div class="invalid-feedback">
      Password must be at least 6 characters long.
    </div>
  </div>

  <button class="btn btn-primary" type="submit">
    Login
  </button>
</form>

<script>
(() => {
  const forms = document.querySelectorAll('.needs-validation');
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    });
  });
})();
</script>

    • What This Code Does

      1. Checks all forms with .needs-validation

      2. Prevents submission if any field is invalid

      3. Adds .was-validated class

      4. Displays Bootstrap error messages

      This script is reused in almost every Bootstrap project.

      User-Friendly Error Messages

      What Makes an Error Message “User-Friendly” ?

      Bad error message:

      “Invalid input”

      Good error message:

      “Password must contain at least 6 characters.”

      User-friendly messages:

      • Explain what went wrong

      • Explain how to fix it

      • Avoid technical language

      • Are short and clear

    • Common Mistakes in Form Validation

      • Relying only on browser popups

      • Showing vague error messages

      • Displaying errors far from inputs

      • Validating too late (after submission only)

      • Ignoring accessibility

      • Using alerts instead of inline feedback

      Best Practices for Project Forms

      • Validate early and clearly

      • Keep messages human-friendly

      • One error message per issue

      • Use Bootstrap feedback classes consistently

      • Combine UX clarity with validation logic

      • Never trust client-side validation alone

    ❮ Previous Next ❯