Improving Email Verification with Kendo UI and Verifalia

Beyond regular expressions and syntactical checks, Verifalia makes email verification a snap. See how to implement it with Kendo UI.

In the ever-evolving landscape of web development, collecting accurate and reliable data through web forms is a key element and, among the data fields, email addresses hold a unique significance as they serve as the gateway for communication with users. Whether it’s a sign-up form, a contact page or an ecommerce checkout, the quality of data users provide is paramount.

However, one often underestimated aspect of data quality is email verification. Many developers rely on regular expressions for email address validation, but this approach has too many limitations and does not take into account the most important information: whether the underlying mailbox actually exists and can accept emails.

While one could send a confirmation message with a link and ask the user to click it for validation, this approach has drawbacks:

• Dependence on cooperation: It relies on someone else’s cooperation, which may not always be guaranteed.
• Time-consuming: The confirmation process can be time-consuming, and users may not respond promptly.
• Error-prone: The process is susceptible to errors, such as users not pasting the verification link correctly on their browsers.
• Unsolicited messages: Users may perceive confirmation messages as unsolicited, potentially leading to a negative user experience.

In this article, we’ll explore the complexities surrounding email validation, the challenges posed by Internet Engineering Task Force (IETF) standards and Requests for Comments (RFCs), internationalized domain names (IDNs) and browser behavior. We will also introduce an effective solution, Verifalia, which enables email verification without the need to send confirmation messages. Read on to explore how this solution can significantly enhance email validation capabilities within Kendo UI.

Email Address Standards and Their Evolution

Email addresses are regulated by a set of IETF standards documented in several RFCs, including but not limited to RFC 1123, RFC 2821, RFC 2822, RFC 3490, RFC 3696, RFC 4291, RFC 5321, RFC 5322 and RFC 5336. These RFCs lay out the somewhat complex mechanisms that define how the Simple Mail Transfer Protocol (SMTP) work and how email messages are exchanged.

These standards have a long history, with some dating back to the early 1980s, preceding the advent of the world wide web. Over time, they have evolved to accommodate new features such as TLS encryption and the capability to handle non-ASCII emails, all while striving to maintain support with existing email exchange mechanisms. Backward compatibility is not a simple thing, as we all know!

This evolution has created a challenging environment for email validation. To illustrate, this regular expression should encompass nearly all the complexities of the email address grammar, and it spans a staggering 6,343 characters in length. (No, please don’t use it: It does not cover all edge cases and managing such a complex beast, even for an expert, can be impractical and error-prone. And it can also open the door to ReDoS (Regular Expression Denial of Service) attacks, which can be exploited for denial-of-service purposes, especially in the backend.)

Non-ASCII email addresses like george@bücher.ch or асиич@мировая-почта.ru further complicate email validation: Different email clients and servers may have varying levels of support for internationalized domain names (IDNs) and the UTF8SMTP extension required to handle non-ASCII mailboxes, leading to inconsistencies in how email addresses are processed and validated. Some may handle non-ASCII emails correctly, while others may not, causing compatibility issues.

Furthermore, from a frontend development standpoint, the situation worsens as different browsers encode the values of input type=email fields differently, leading to inconsistencies in interpretation. The HTML standard specification provides insufficient guidance in this area, leaving frontend developers to navigate a maze of potential issues with international emails.

Due to these complexities, most email validation implementations took a cautious approach, resorting to a much simpler regular expression and dealing with potential issues only when sending actual email messages, although this approach is far from ideal. This trend extends to web browsers as well, with the HTML standard specification mandating vendors to employ this very basic JavaScript-compatible regular expression for validating input type="email" fields, even willfully violating the relevant RFCs:

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

This regular expression, which is also used by the Validator component in Progress Kendo UI for jQuery, is far from exhaustive, leaving room for false negatives and limiting the accuracy of email validation.

For instance, it fails to match some unusual but still perfectly valid emails like "seti\@home"@berkeley.edu or foo. bar@gmail.com (note the space after the first dot) and matches invalid emails like x@y. Browsers like Chrome have attempted to bridge the gap by introducing their own email validation regex, but at the time of this writing edge cases are still an issue as you may find out.

At the end of the day, these syntactical checks can only do so much. Validation performed by browsers and form validation libraries focuses solely on syntax. These checks ensure that an email address adheres to the basic format but do not verify whether the mailbox is operational, reachable or able to accept emails. This limitation can lead to false positives, causing frustration for both developers and users.

What if all of these problems could be solved with just a single line of code? Spoiler alert: Yes, it’s possible.

How to Overcome Email Validation Challenges

When evaluating approaches to email validation, there are many vendors that provide solutions. Full disclosure, I founded Verifalia, which provides a SaaS solution to the challenges of email validation using a blend of AI, an SMTP emulator, and several email verification tools. Verifalia connects to the mail exchangers responsible for the email address under test through its own network, delivering real-time, uncached results.

Verifalia features an embeddable email verification widget that integrates with web forms, and later in the post we’ll look at how to use it with Kendo UI for jQuery. This widget automatically enhances the validation logic of the Validation component, incorporating a comprehensive mailbox existence check and additional functionalities (more details below).

For each provided email address, Verifalia conducts a range of email checks, including:

• Advanced syntax checks: Exhaustive syntax checks go beyond what regular expressions can achieve, including support for quoted words, international emails, folding white spaces, comments and every single option detailed by the whole set of RFCs
• DNS records analysis: The service analyzes the domain’s DNS records, ensuring that the mail exchangers are correctly configured.
• SMTP connectivity and mailbox checks: Verifalia goes the extra mile by performing SMTP connectivity and mailbox checks, verifying whether the mailbox is operational and can accept emails.
• Toxic email detection: It identifies and flags disposable/throw-away email addresses, as well as honeypots and spam traps, which are typically undesirable.

Upon completion of an email verification, the Verifalia solution provides a classification that can fall into one of four categories: Deliverable, Undeliverable, Risky or Unknown. It also supplies the precise underlying reason for this classification, along with a detailed analysis.

Now, let’s explore how to make the most of Verifalia’s email checker within Kendo UI applications.

Verifying Email Addresses in Kendo UI

As the most modern libraries in the Kendo UI bundle, Kendo UI for Angular, KendoReact and Kendo UI for Vue all offer the ability to add and import ES modules. (Kendo UI for jQuery is covered below.) Verifalia comes with a free and open-source SDK for JavaScript, conveniently bundled as an npm package, whose exported ES modules can be easily added to any project based on a modern frontend framework.

To verify email addresses in your Angular, React or Vue app using Verifalia, the initial step is to install the verifalia npm package:

npm install verifalia

After that, the Verifalia API client can be imported into any source file with the following code:

import { VerifaliaRestClient } from 'verifalia';

Using Verifalia requires an account, which is free to register. For security reasons, it is also always advisable to create and use a dedicated browser app to access the API through a frontend app, as doing so will reduce the permission set to the minimum required to verify emails and nothing more (the Verifalia API is quite extensive). While setting up the browser app, you can also configure throttling and firewall rules to prevent credit depletion and guard against malicious overuse. Create a browser app through the Verifalia client area and take note of its app key, which is needed to instantiate a VerifaliaRestClient object:

const verifalia = new VerifaliaRestClient({
  username: 'YOUR-BROWSER-APP-KEY-HERE'
});

Once done, verifying an email address is super easy:

const result = await verifalia
  .emailValidations
  .submit('batman@gmail.com');

const entry = result.entries[0];

if (entry.classification === 'Undeliverable') {
  // TODO: Show that ugly toast notification
}

As you might expect, the submit() function validates the email address through the Verifalia API and returns a promise that can be awaited—the verification process is asynchronous and the processing time depends on the target mail exchanger(s) being tested.

The returned verification result object includes the classification for the email address being checked, along with one of over 40 status codes pinpointing the exact reason behind that classification. For example, it might return MailboxHasInsufficientStorage if the email is classified as Undeliverable due to its mailbox being over its storage quota; or MailExchangerIsHoneypot if the email is classified as Risky because it is a honeypot (also known as spamtrap).

Furthermore, the object contains various fields and flags detailing the results of Verifalia’s comprehensive analysis of the email, including an indicator of whether the email address is associated with a free email service (such as Gmail or Yahoo) or a business one.

The SDK is quite extensive and allows you to do much more than that (including bulk email verification, importing CSV and Excel files with the emails to validate, exporting results in multiple formats, etc.), so you may want to review the documentation to learn more.

A Ready-Made Email Verification Widget, Compatible with Kendo UI for jQuery

As anticipated, checking whether an email address is valid and can accept emails is even easier in Kendo UI for jQuery, thanks to the Verifalia email verification widget. The widget consists of a single lightweight JavaScript file, with no dependencies on other libraries or frameworks.

Once embedded in a webpage, it provides the enhanced Verifalia email verification logic to every input type="email" field, automatically. Moreover, if it detects that Kendo UI for jQuery is loaded, it overrides and enhances the existing email validation logic provided by the Validator component so that it always checks emails through the whole Verifalia email verification flow.

Embedding the email verification widget in a webpage is trivial: Create a browser app as explained in the previous section and, from within the Verifalia client area, click the “Embeddable widget” tab, then copy the HTML embedding code shown there into the page, right before the closing </body> tag. And that’s it!

Once embedded, the widget performs real-time email verification as users type, offering visual feedback depending on its configuration and the context. If Kendo UI for jQuery is detected, the widget remains stealth by default and plays nicely with the existing validation logic and styles of the page.

To enjoy an enhanced user experience, however, it is advisable to configure the widget to provide visual feedback so that it shows a green checkmark for valid email addresses and a red cross for invalid ones and displays error squiggles beneath typos wherever applicable. Here is an example demonstrating that using a data-verifalia-* configuration attribute, as explained in the widget documentation (alternatively, you can also configure the widget through a JavaScript literal object):

<input type="email" data-verifalia-inputBindings-styling="true" />

The ending result will look like this:

The Verifalia widget provides a high level of customization, offering options to control various aspects such as when it should trigger validation failure, visual appearance and CSS adjustments, the option to toggle error squiggles under typos, debounce time and many other customization possibilities.

Also, by default, it automatically blocks not only invalid or unreachable email addresses but also disposable and throw-away addresses—however, it’s super easy to configure it to also block other types of addresses, such as those provided by free email service providers like Gmail or Yahoo. Here is an example demonstrating that using a data-verifalia-* configuration attribute:

<input type="email" data-verifalia-emailValidations-block="@disposable, @free" />

Additionally, the widget automatically detects the form’s directionality and adapts its visual feedback accordingly. This means it adjusts its appearance seamlessly between left-to-right and right-to-left UIs based on the form’s layout.

Closing

Verifying email addresses is a complex task, and regular expressions have their limitations, especially when it comes to assessing the actual deliverability of an email address, at the SMTP connectivity and mailbox levels.

However, with tools like Verifalia you can validate email addresses in real-time. With SDKs for major software development platforms and languages, it’s easy to verify email addresses within your Kendo UI for Angular, KendoReact, and Kendo UI for Vue applications with Verifalia. There’s even an embeddable JavaScript widget with the Verifalia solution that verifies email addresses in Kendo UI for jQuery applications, providing instant feedback to users as they type.

To learn more about Verifalia, visit https://verifalia.com/, and to explore the entire Kendo UI offering, check out https://www.telerik.com/kendo-ui.