Guides

Last updated

July 20, 2025

5 Ways to Implement Email Validation in Bootstrap

Nicolas Rios

Table of Contents:

ON THIS PAGE

Heading

Get your free

email validation

API key now

4.8 from 1,863 votes

See why the best developers build on Abstract

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

No credit card required

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.

Validate Emails with Abstract API

Start validating emails today to improve data quality and prevent bounces from hurting your reputation.

Get started for free

How Abstract API Handles Email Validation in Bootstrap

Abstract API addresses the core weaknesses of traditional methods through server-side checks that assess an email's actual deliverability.

It moves validation to the server, so users cannot bypass the check.
It performs real-time MX record lookups and SMTP handshakes to confirm server health.
It screens for disposable, free, and role-based email providers.
It provides typo auto-correction and a continuously trained quality score to handle edge cases.
It returns a clear deliverability verdict and granular flags for detailed risk scores.

How to Add Abstract API to Your Dev Environment

Once you understand Abstract's capabilities, you can add its email validation API to your project with ease.

Sign in at Abstract API, create a project, and copy your Email Validation API key.
Set an environment variable for your key, such as ABSTRACT_EMAIL_KEY=your_key.
Install a client like Axios through the command "npm i axios" or use native fetch.
Create your Bootstrap form and connect it to your script, as the example below shows.
Deploy the application and monitor its performance through the Abstract dashboard.

Sample Email Validation Implementation with Abstract API

The JavaScript code below attaches an event listener to the form. When a user submits the form, the code prevents the default submission. It then sends the email address to the Abstract API endpoint for validation. If the API returns a "DELIVERABLE" status and the email is not from a disposable provider, the form proceeds. Otherwise, it marks the input field as invalid.

For an address like "user@gnamil.com", the API returns a detailed JSON response. It might look like this:

In this example, the address format is correct, but the SMTP probe failed, so the final verdict is "UNDELIVERABLE". The API also suggests a correction to "user@gmail.com" and provides other flags. You can use these details to prompt the user for a correction, reject the submission, or flag it for manual review.

Final Thoughts

Traditional email validation in Bootstrap often just checks syntax and can be bypassed. This allows bad addresses to harm your sender reputation. Abstract API performs server-side checks for actual deliverability, which includes MX record lookups and SMTP handshakes. To reliably validate user emails, consider an account on Abstract API to get your free API key.

Frequently Asked Questions

What is email validation in Bootstrap?

Email validation in Bootstrap means checking that a user's email input is correctly formatted before the form is submitted, while using Bootstrap's built-in CSS classes to show visual feedback. Bootstrap provides is-valid and is-invalid classes that display green or red styling on the input field, but it does not perform the validation logic itself: that is handled by HTML5 attributes, JavaScript, or an external API.

What is the difference between HTML5 constraint validation and JavaScript-based validation in Bootstrap?

HTML5 constraint validation uses the browser's native type="email" attribute and requires no custom code; Bootstrap's was-validated class triggers the visual feedback on submission. JavaScript-based validation gives you more control, such as blocking certain domains or applying stricter rules with regex, and provides real-time per-keystroke feedback by toggling Bootstrap's valid/invalid classes programmatically. The HTML5 approach is simpler but relies on inconsistent browser implementations and accepts formats that may not be deliverable.

Can Bootstrap email validation confirm whether an email address is real and deliverable?

No. All client-side methods (including HTML5 and JavaScript regex) can only check format; they cannot verify that a domain exists, that MX records are configured, or that the mailbox actually accepts messages. To confirm deliverability you need server-side validation, such as calling an API like Abstract's Email Validation API, which performs MX record lookups, SMTP handshake checks, and screens for disposable address providers.

How does the jQuery Validation Plugin work with Bootstrap?

The jQuery Validation Plugin handles complex validation rules and form state management, while Bootstrap provides the visual layer. You configure the plugin's highlight, unhighlight, and errorPlacement options to add and remove Bootstrap's is-invalid class and position error messages inside Bootstrap's feedback elements. This keeps validation logic separate from styling, making it easier to maintain.

When should I use asynchronous server-side validation in a Bootstrap form?

Use asynchronous server-side validation when the check requires backend resources that are unavailable in the browser, for example verifying that an email address is not already registered in your database. The form uses fetch() to send the value to an endpoint, then applies Bootstrap's is-valid or is-invalid class based on the response. This approach can be combined with client-side format checks so users get instant feedback on typos while the server handles deeper checks.

How do you integrate Abstract's Email Validation API with a Bootstrap form?

After the user enters an email, your JavaScript calls Abstract's Email Validation API endpoint with the address and your API key. The API returns a response that includes deliverability status, a quality score, MX record data, SMTP check results, and a flag for disposable providers. Your code then toggles Bootstrap's is-valid or is-invalid class on the input based on that result, giving users accurate feedback that goes beyond what any client-side method can provide.