5 Ways to Implement Email Validation in Bootstrap

Proper email validation is a key part of any Bootstrap form. Here, we'll walk through five different methods for adding it, providing code snippets for each. We'll then examine the drawbacks of these traditional techniques and show how Abstract API addresses them.

How to Implement Email Validation in Bootstrap

Bootstrap offers several ways to validate email inputs. These methods range from simple HTML5 attributes to custom JavaScript logic, each one integrates with Bootstrap’s visual feedback system.

HTML5 Constraint Validation with a Bootstrap Wrapper

This technique uses the browser’s native validation for inputs with a "type" of "email". Bootstrap does not add new logic but applies its own styles over the browser's ":valid" and ":invalid" states.

The JavaScript targets forms with the "needs-validation" class. When a user attempts to submit the form, the script prevents submission if the `checkValidity()` method returns false and adds the "was-validated" class. This action makes Bootstrap’s validation styles visible.

<!-- Markup -->
<form class="needs-validation" novalidate>
  <input type="email" class="form-control" id="workEmail" required>
  <div class="invalid-feedback">Bad address</div>
</form>

<!-- JS -->
<script>
  document.querySelectorAll('.needs-validation')
    .forEach(f => f.addEventListener('submit', e => {
      if (!f.checkValidity()) e.preventDefault();
      f.classList.add('was-validated');
    }));
</script>

Pure JavaScript Regex with Bootstrap Classes

For custom validation rules, like a rule to disallow certain domains, you can use JavaScript's regular expressions. This approach bypasses the browser's built-in validator and gives you full control over the logic.

An event listener on the input field tests the value against a regex pattern with each keystroke. It then programmatically toggles Bootstrap’s "is-valid" or "is-invalid" classes on the element to show immediate feedback, as documented for server-side validation.

const rx = /^[A-Za-z0-9._%+-]+@(?!gmail\.com)([A-Za-z0-9-]+\.)+[A-Za-z]{2,}$/;
const el = document.getElementById('personalEmail');
el.addEventListener('input', () => {
  const ok = rx.test(el.value);
  el.classList.toggle('is-valid', ok);
  el.classList.toggle('is-invalid', !ok);
});

jQuery Validation Plugin Integration

The jQuery Validation plugin can manage complex validation rules while you retain Bootstrap's visual language. The plugin understands the difference between HTML5 standards and stricter RFC-5322 email formats.

You configure the plugin to use Bootstrap's classes. The "highlight" and "unhighlight" options add or remove "is-valid" and "is-invalid". The "errorPlacement" function ensures error messages appear correctly within Bootstrap's feedback containers.

$('#acctForm').validate({
  rules: { email: { required: true, email: true } },
  highlight: el => $(el).addClass('is-invalid').removeClass('is-valid'),
  unhighlight: el => $(el).addClass('is-valid').removeClass('is-invalid'),
  errorPlacement: (err, el) => err.addClass('invalid-feedback').insertAfter(el)
});

Asynchronous Server-Side Validation

When validation requires a backend check, such as for email uniqueness or MX record existence, an asynchronous call is necessary. This is often tied to the input field’s "blur" event to avoid excessive requests.

The script sends the email value to a server endpoint with `fetch()`. After it receives a response, it toggles the "is-valid" or "is-invalid" class on the input field, which again uses Bootstrap’s standard presentation layer for feedback.

async function verify(value) {
  const r = await fetch('/api/verify-email?e=' + encodeURIComponent(value));
  return (await r.json()).ok;
}
email.addEventListener('blur', async () => {
  const ok = await verify(email.value);
  email.classList.toggle('is-valid', ok);
  email.classList.toggle('is-invalid', !ok);
});

Challenges of Email Validation in Bootstrap

While these methods integrate with Bootstrap's styles, they present significant practical challenges. The validation is often superficial, inconsistent across browsers, and difficult to maintain as standards evolve.

• The HTML5 constraint validation method depends on inconsistent browser implementations. The built-in checks are often too permissive, accept invalid formats, and produce different error messages and behaviors across browsers, which creates an unreliable user experience.
• Custom JavaScript regex patterns become difficult to maintain. A pattern that enforces strict RFC compliance is complex and can degrade performance, while simpler versions often fail to account for new top-level or internationalized domains.
• Client-side checks, whether with HTML5 or regex, cannot confirm an email's deliverability. They do not verify domain existence, MX records, or disposable addresses. This limitation provides a false sense of security about the email's validity.
• The jQuery Validation plugin adds a significant dependency to modern projects. It also requires custom code for asynchronous checks, which complicates the implementation for tasks like server-side verification of an email address.