Multi-Field Signup Form

Create a validated registration form with Bootstrap form components.

FormsValidationUtilities

Overview

A signup form is where Bootstrap's form styling and its validation feedback have to work together, not separately. Bootstrap ships styled replacements for every native field — form-control, form-select, form-check — but the red-border, red-text "this field is wrong" feedback only appears once a form carries the was-validated class, which nothing adds automatically. That gap is exactly what this project fills in.

You will build a registration form with first/last name, email, password with confirmation, a country dropdown, and a required terms checkbox, then wire up the short vanilla-JavaScript snippet Bootstrap's own documentation recommends so submitting the form with invalid fields shows styled, per-field error messages instead of the browser's default validation bubbles.

What You'll Build

A centered card-wrapped registration form using form-label + form-control pairs for text/email/password fields.
A form-select dropdown for country and a required form-check checkbox for agreeing to terms.
Per-field invalid-feedback messages that appear only once a field actually fails validation.
A small JavaScript snippet using the browser's constraint validation API to trigger Bootstrap's was-validated styling on submit.
A full-width submit button using the d-grid utility.

Prerequisites

Native HTML form basics — <form>, <input>, <label>, and attributes like required, type, and minlength/pattern.
Bootstrap's grid (row/col-*) for laying fields out side by side.
Spacing and layout utility classes (g-3, d-grid, mt-1) used to space and arrange the fields.
Basic vanilla JavaScript — querySelectorAll, addEventListener, and reading a boolean from a method call — for Step 6.

Project Structure

The whole form lives in one file, signup.html. A container/row/col combination centers a card on the page, and the <form> inside that card carries two attributes from the very first line: novalidate, which turns off the browser's own default validation-bubble UI so Bootstrap's styled feedback can show instead, and needs-validation, a plain marker class with no built-in Bootstrap styling of its own — it exists purely as a hook the JavaScript in Step 6 looks for with querySelectorAll.

Every field that can fail validation gets an .invalid-feedback element immediately after it. That element is invisible by default; Bootstrap's CSS only reveals it when its :invalid sibling input sits inside a form carrying .was-validated — which is exactly the class the Step 6 script adds the moment the form is submitted.

Step 1: Set Up the Page and the Form Shell

Start with a standard HTML5 document, load Bootstrap, and build the centered card that will hold the form. The row justify-content-center + col-md-8 col-lg-6 combination keeps the form a readable width on large screens instead of letting it stretch edge to edge.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Your Account</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

    <div class="container py-5">
      <div class="row justify-content-center"> <!-- centers the card instead of letting it stretch full width -->
        <div class="col-md-8 col-lg-6">
          <div class="card shadow-sm">
            <div class="card-body p-4">
              <h1 class="h3 mb-4 text-center">Create Your Account</h1>

              <!-- novalidate: turns off the browser's default validation popups so
                   Bootstrap's own styled feedback (added in later steps) shows instead -->
              <!-- needs-validation: not a Bootstrap style, just a marker class the
                   script in Step 6 uses to find this form with querySelectorAll -->
              <form class="needs-validation" novalidate>
                <!-- fields added in the steps that follow -->
              </form>

            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Step 2: Add Name Fields

First and last name sit side by side using row g-3 + col-md-6, collapsing to one column per row automatically on narrow screens since no col-* breakpoint smaller than md is set. Each invalid-feedback div is written once here and, from this point on, follows the same pattern for every field: it sits immediately after the input it describes.

<!-- Goes inside the <form> from Step 1 -->
<div class="row g-3"> <!-- g-3: consistent gutter between the two columns below -->
  <div class="col-md-6">
    <label for="firstName" class="form-label">First name</label>
    <input type="text" class="form-control" id="firstName" name="firstName" required>
    <!-- .invalid-feedback is invisible until this input is :invalid AND the form
         has .was-validated - both conditions come from the Step 6 script -->
    <div class="invalid-feedback">First name is required.</div>
  </div>
  <div class="col-md-6">
    <label for="lastName" class="form-label">Last name</label>
    <input type="text" class="form-control" id="lastName" name="lastName" required>
    <div class="invalid-feedback">Last name is required.</div>
  </div>
</div>

Step 3: Add Email and Password Fields

The email field is wrapped in input-group so an @ symbol sits flush against its left edge — a purely visual affordance, since type="email" alone already handles the actual format validation. The password field's pattern requires at least one letter and one digit across 8+ characters; pattern and minlength both run through the same browser-native checkValidity() call the Step 6 script relies on, so no extra validation logic is needed for either.

<div class="row g-3 mt-1">
  <div class="col-12">
    <label for="email" class="form-label">Email</label>
    <div class="input-group"> <!-- input-group lets the @ icon sit flush against the input -->
      <span class="input-group-text">@</span>
      <input type="email" class="form-control" id="email" name="email" required>
      <div class="invalid-feedback">Please enter a valid email address.</div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" name="password" required
           minlength="8" pattern="(?=.*\d)(?=.*[a-zA-Z]).{8,}">
    <!-- pattern requires at least one letter and one digit across 8+ characters -->
    <div class="invalid-feedback">Password must be 8+ characters and include a letter and a number.</div>
  </div>
  <div class="col-md-6">
    <label for="confirmPassword" class="form-label">Confirm Password</label>
    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
    <!-- Checking the two password fields actually match needs a few lines of custom
         JS (setCustomValidity) beyond what "required" alone checks - see Extend This Project -->
    <div class="invalid-feedback">Please confirm your password.</div>
  </div>
</div>

Step 4: Add a Country Select and Terms Checkbox

form-select restyles a native <select> to match form-control's look, but it is still a genuine <select> underneath, so keyboard and screen-reader behavior is unchanged. The terms checkbox uses form-check — the same label-pairing pattern as form-label, just for checkboxes and radios — and required on a checkbox means the form is invalid until it is checked, not just present.

<div class="row g-3 mt-1">
  <div class="col-md-6">
    <label for="country" class="form-label">Country</label>
    <select class="form-select" id="country" name="country" required>
      <option value="" selected disabled>Choose...</option>
      <!-- selected disabled: shown by default but not a real, selectable answer,
           so leaving it chosen still fails the "required" check -->
      <option value="IN">India</option>
      <option value="US">United States</option>
      <option value="GB">United Kingdom</option>
      <option value="AU">Australia</option>
    </select>
    <div class="invalid-feedback">Please select your country.</div>
  </div>
  <div class="col-md-6 d-flex align-items-end">
    <!-- form-check pairs a checkbox with its label, mirroring how form-label
         pairs with the inputs above; required here since agreeing is mandatory -->
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="terms" name="terms" required>
      <label class="form-check-label" for="terms">
        I agree to the <a href="#">Terms of Service</a>
      </label>
      <div class="invalid-feedback">You must agree before signing up.</div>
    </div>
  </div>
</div>

Step 5: Add the Submit Button

The submit button closes out the form. d-grid makes it stretch to the container's full width — a common pattern for a form's single primary action, since a small button floating at the left edge of a wide card looks unfinished.

<!-- d-grid: makes the button span the full width of its container -->
<div class="d-grid mt-4">
  <button class="btn btn-primary btn-lg" type="submit">Create Account</button>
</div>

Step 6: Wire Up Bootstrap's Validation JavaScript

This is the piece that actually turns on every .invalid-feedback message added in the earlier steps. form.checkValidity() runs the browser's built-in constraint validation — checking every required, pattern, minlength, and type="email" at once — without submitting anything. If it returns false, the real submit is cancelled with preventDefault(); either way, .was-validated is added, which is the class Bootstrap's CSS actually watches for before showing red borders and feedback text.

<!-- Add just before </body>, after the Bootstrap bundle <script> tag -->
<script>
(() => {
  'use strict'

  // Finds every form carrying the "needs-validation" marker class from Step 1
  const forms = document.querySelectorAll('.needs-validation')

  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      // checkValidity() runs the browser's native constraint validation
      // (required, pattern, minlength, type="email", etc.) without submitting
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      // was-validated is what actually switches on Bootstrap's red/green field
      // styling and reveals the matching .invalid-feedback text for each field
      form.classList.add('was-validated')
    }, false)
  })
})()
</script>

Complete Code

Here is the full signup form with every field and the validation script assembled in order.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Your Account</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

    <div class="container py-5">
      <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
          <div class="card shadow-sm">
            <div class="card-body p-4">
              <h1 class="h3 mb-4 text-center">Create Your Account</h1>

              <form class="needs-validation" novalidate>

                <div class="row g-3">
                  <div class="col-md-6">
                    <label for="firstName" class="form-label">First name</label>
                    <input type="text" class="form-control" id="firstName" name="firstName" required>
                    <div class="invalid-feedback">First name is required.</div>
                  </div>
                  <div class="col-md-6">
                    <label for="lastName" class="form-label">Last name</label>
                    <input type="text" class="form-control" id="lastName" name="lastName" required>
                    <div class="invalid-feedback">Last name is required.</div>
                  </div>
                </div>

                <div class="row g-3 mt-1">
                  <div class="col-12">
                    <label for="email" class="form-label">Email</label>
                    <div class="input-group">
                      <span class="input-group-text">@</span>
                      <input type="email" class="form-control" id="email" name="email" required>
                      <div class="invalid-feedback">Please enter a valid email address.</div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control" id="password" name="password" required
                           minlength="8" pattern="(?=.*\d)(?=.*[a-zA-Z]).{8,}">
                    <div class="invalid-feedback">Password must be 8+ characters and include a letter and a number.</div>
                  </div>
                  <div class="col-md-6">
                    <label for="confirmPassword" class="form-label">Confirm Password</label>
                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
                    <div class="invalid-feedback">Please confirm your password.</div>
                  </div>
                </div>

                <div class="row g-3 mt-1">
                  <div class="col-md-6">
                    <label for="country" class="form-label">Country</label>
                    <select class="form-select" id="country" name="country" required>
                      <option value="" selected disabled>Choose...</option>
                      <option value="IN">India</option>
                      <option value="US">United States</option>
                      <option value="GB">United Kingdom</option>
                      <option value="AU">Australia</option>
                    </select>
                    <div class="invalid-feedback">Please select your country.</div>
                  </div>
                  <div class="col-md-6 d-flex align-items-end">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="terms" name="terms" required>
                      <label class="form-check-label" for="terms">
                        I agree to the <a href="#">Terms of Service</a>
                      </label>
                      <div class="invalid-feedback">You must agree before signing up.</div>
                    </div>
                  </div>
                </div>

                <div class="d-grid mt-4">
                  <button class="btn btn-primary btn-lg" type="submit">Create Account</button>
                </div>

              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    (() => {
      'use strict'
      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')
        }, false)
      })
    })()
    </script>
</body>
</html>

Sample Run

What Happens

Click Run to see what this code prints.

Extend This Project

Add real password-match checking with confirmPassword.setCustomValidity(...), called on each input event, so the confirm field only passes once it actually equals the password field.
Swap form-label + form-control pairs for Bootstrap's form-floating variant so labels animate into a compact floating position once a field has a value.
Add a password-strength meter that updates live as the user types, using a progress bar styled by how many of the pattern requirements are currently met.
Replace the client-only validation with a real submit handler that posts the form data with fetch and shows a server-driven success or error state.
Add a profile-picture type="file" field, restricted with accept="image/*", above the submit button.

Summary

You built a fully validated signup form using Bootstrap's form components paired with its documented validation script: form-control/form-select/form-check for styled fields, invalid-feedback for per-field error text, and a short JavaScript snippet that turns the browser's built-in constraint validation into Bootstrap's styled was-validated feedback. That same three-part pattern — styled fields, feedback elements, and the validation script — is reusable on any form Bootstrap renders.