Bootstrap 4表单实时验证实现问询：替换提交触发式验证

Great to hear your submit-triggered validation is working smoothly! Let's adjust your setup to add that real-time validation you want—so fields get checked as soon as users move away from them (like switching from "First Name" to "Last Name"). Here's how to make it happen while keeping your existing submit logic intact:

Step 1: Build a Reusable Field Validation Function #

First, let's create a dedicated function to validate individual fields—this keeps our code clean and easy to reuse:

function validateField(field) {
  // Use HTML5's native validation check to verify the field
  const isValid = field.checkValidity();

  // Toggle Bootstrap's validation classes to show feedback
  if (isValid) {
    field.classList.remove('is-invalid');
    field.classList.add('is-valid');
  } else {
    field.classList.remove('is-valid');
    field.classList.add('is-invalid');
  }

  // Make sure the parent form has the `was-validated` class so Bootstrap styles apply
  field.closest('form').classList.add('was-validated');
}

Step 2: Add Event Listeners for Field Blur #

We'll use the blur event (triggered when a user leaves a field) to kick off validation. Attach this listener to all your form controls:

// Grab all form controls inside your validation-enabled form
const formControls = document.querySelectorAll('.needs-validation .form-control');

// Attach the blur event to each control
formControls.forEach(control => {
  control.addEventListener('blur', function() {
    validateField(this);
  });
});

If you want even more immediate validation (as users type), swap blur with the input event—though blur perfectly matches your request of validating when switching between fields.

Step 3: Update Your Submit Validation Logic #

We'll tweak your original function to fix a small oversight (passing the event parameter) and keep your scroll-to-first-error functionality working:

function validateForm(event) {
  event.preventDefault();
  event.stopPropagation();

  const form = event.target;
  const isFormValid = form.checkValidity();

  if (!isFormValid) {
    // Find the first invalid field and scroll the user to it
    const firstInvalidField = form.querySelector('.form-control:invalid');
    window.scrollTo(0, getOffset(firstInvalidField).top);
  }

  form.classList.add('was-validated');

  // Uncomment this line if you want to submit the form only when it's fully valid
  // if (isFormValid) form.submit();
}

Quick Check: HTML Structure #

Make sure your form follows Bootstrap's validation markup rules—each control needs a corresponding invalid-feedback element for error messages to display properly:

<div class="form-group">
  <label for="firstName">First Name</label>
  <input type="text" class="form-control" id="firstName" required>
  <div class="invalid-feedback">Please enter your first name.</div>
</div>

This setup will validate each field the moment users move away from it, while still running a full form check on submit and scrolling to the first error if needed.

内容的提问来源于stack exchange，提问作者Ryan H