Email Validation for HTML Forms

Do you have an email address field on your HTML5 form? If the answer is positive, probably you have implemented a JavaScript or jQuery email validator to make sure the user is providing an email address, not a random string. The problem with such type of email validation is, it only checks the syntax of a given email address. For example, your user can provide [email protected] and your form will submit with no problem. The case could be even worse. There are many disposable email providers such as 10minutemail. Disposable email providers are working on their services daily and are providing many different and new domains every day. If you have no mechanism to fight them, your database will be full of such emails soon or later.

I guess you are thinking about double opt-in emails. I mean sending confirmation emails to eliminate the invalid one. But it has two problems: 1) you still need to send an email to an invalid address to find out this is invalid. It can affect your sending reputation is a long term. 2) How do you want to fight with disposable emails then?

This is why checking an email syntax using or sending a double opt-in confirmation email is not enough. You need to check if an email address exists before you want to store it to your database or send it a confirmation email. DeBounce offers a robust email validation API that offers real-time email validation and verification. You can implement the API in your backend and perform proper actions if the email address is valid.

I guess most users prefer to set up this type of email validation with a few line of codes without any hassle – just like the regular jQuery email validation. This is why we have developed an easy to set up the JavaScript widget. This is a piece of code that detects for email address fields on an HTML page and appends the validation engine to it. So, the validation takes place on the front-end. Here is a demonstration of how this type of email validation works:

• Save

Demonstration of JavaScript real-time email validation.

As you can see, if an invalid email is provided, the email address will be converted to a placeholder (which is equal to an empty input), so if the email field is a mandatory one, the form cannot submit. To set up this type of email validation, you need to have a DeBounce account with an API key. This is a paid service, but we did our best to lower the validation prices. You can open an account here and get an API key from here. Note that you must copy the public API key because it can be detected by all users that are seeing your page. You also must add your domain address to the approved CORS domains of your API key. This means only approved addresses can use the validation widget and it will not work on other websites. Once you have a valid public API key with proper permissions, this is time to put the codes to your HTML page – after the form or at the end of the page:

<script type="text/javascript">
DeBounce_APIKEY = 'YOUR_PUBLIC_API_KEY_HERE'; // Your DeBounce Public API Key.
DeBounce_BlockFreeEmails = 'true'; // Set this value to true to block free emails like Gmail.
DeBounce_DisablePlaceholder = 'true'; // Disable converting the invalid email to placeholder or not.
DeBounce_DisableLink = 'true'; // Disable link to DeBounce website or not.
DeBounce_DisableTooltip = 'true'; // Disable enhanced tooltip and show browser default or not.
DeBounce_RedBackgound = 'true'; // Convert input background to red for an invalid email or not.
//-- Translate
DeBounce_Text_Valid = 'Email is Valid.';
DeBounce_Text_Invalid = 'Email is Invalid.';
</script>
<script async type="text/javascript" src="https://cdn.debounce.io/widget/DeBounce.v2.js"></script

More information about the real-time JavaScript email validation can be found here and here. That’s all. Your email field is now protected. Have you tried this? What do you think?