Form Validation

🛡️ Bootstrap Form Validation: Your Form’s Security Guard

Imagine you have a clubhouse with a door. Before anyone enters, a security guard checks their invitation. No invitation? No entry! That’s exactly what form validation does for your website forms.

🎯 What is Form Validation?

Think of filling out a form like ordering pizza over the phone:

• Name? You say it
• Phone number? You tell them
• Address? You give it

But what if you said “banana” for your phone number? The pizza person would say, “Wait, that’s not a real number!” That’s validation — checking if answers make sense!

<form class="needs-validation" novalidate>
  <input type="email" required>
  <button type="submit">Send</button>
</form>

Key pieces:

• needs-validation → tells Bootstrap “check this form”
• novalidate → stops browser’s ugly default checks
• required → this field MUST have something

🎨 Custom Validation Styles

Remember our security guard? Bootstrap gives him a green uniform for “good job!” and a red uniform for “try again!”

The Magic Classes

Show Helpful Messages

<div class="mb-3">
  <label class="form-label">
    Your Email
  </label>
  <input type="email"
         class="form-control"
         required>
  <div class="valid-feedback">
    Looks good! ✅
  </div>
  <div class="invalid-feedback">
    Please enter a real email! 📧
  </div>
</div>

How it works:

• .valid-feedback → hidden until input is valid
• .invalid-feedback → hidden until input is invalid
• Messages appear automatically!

Make It All Work (JavaScript)

// Find all forms that need checking
const forms = document.querySelectorAll(
  '.needs-validation'
);

forms.forEach(form => {
  form.addEventListener('submit', event => {
    // Is the form filled correctly?
    if (!form.checkValidity()) {
      // No! Stop everything!
      event.preventDefault();
      event.stopPropagation();
    }
    // Show the green/red styles
    form.classList.add('was-validated');
  });
});

🌐 Server-side Validation

The Double-Check System

Imagine you’re at an amusement park:

1. Gate guard checks your ticket (browser/client-side)
2. Ride operator checks again (server-side)

Why check twice? Because someone might sneak past the gate guard!

graph TD
    A["User fills form"] --> B["Browser checks"]
    B --> C{Valid?}
    C -->|Yes| D["Send to server"]
    C -->|No| E["Show red errors"]
    D --> F["Server checks AGAIN"]
    F --> G{Still valid?}
    G -->|Yes| H["Save data ✅"]
    G -->|No| I["Send errors back"]
    I --> E

Why Server-side Matters

Server Returns Errors? Show Them!

When your server finds a problem, add the red styling:

<!-- Server said email is taken! -->
<input type="email"
       class="form-control is-invalid">
<div class="invalid-feedback">
  This email is already registered!
</div>

Remember: Always validate on the server. Browser checks are just for being nice to users!

💬 Validation Tooltips

Normal error messages sit below the input. But what if you want them to pop up like speech bubbles? Use tooltips!

Regular vs Tooltip Feedback

<!-- REGULAR: Message below -->
<div class="invalid-feedback">
  Please fill this out.
</div>

<!-- TOOLTIP: Floating bubble -->
<div class="invalid-tooltip">
  Please fill this out.
</div>

Complete Tooltip Example

<form class="needs-validation" novalidate>
  <div class="mb-3 position-relative">
    <label class="form-label">
      Username
    </label>
    <input type="text"
           class="form-control"
           required>
    <div class="invalid-tooltip">
      Pick a username!
    </div>
  </div>
  <button type="submit">
    Join
  </button>
</form>

The secret sauce: position-relative on the parent! Without it, the tooltip floats away!

When to Use Which?

🏁 Putting It All Together

Here’s a real-world signup form with everything:

<form class="needs-validation" novalidate>

  <!-- Username with tooltip -->
  <div class="mb-3 position-relative">
    <label class="form-label">
      Username
    </label>
    <input type="text"
           class="form-control"
           minlength="3"
           required>
    <div class="valid-tooltip">
      Great choice!
    </div>
    <div class="invalid-tooltip">
      At least 3 characters
    </div>
  </div>

  <!-- Email with regular feedback -->
  <div class="mb-3">
    <label class="form-label">
      Email
    </label>
    <input type="email"
           class="form-control"
           required>
    <div class="valid-feedback">
      Looks good!
    </div>
    <div class="invalid-feedback">
      Need a real email
    </div>
  </div>

  <button class="btn btn-primary">
    Sign Up
  </button>

</form>

🎓 Quick Summary

🌟 You Did It!

You now know how to:

• ✅ Set up Bootstrap form validation
• ✅ Show pretty success/error styles
• ✅ Understand why servers check too
• ✅ Use floating tooltip messages

Your forms are now protected by the best security guard in town! 🛡️