An easy-to-use tool that watches the email input of your application and checks if the email can have some typos and shows a good suggestion.
It's highly customizable, It has different locales for suggestions, modes and more!
Feel free to contribute or suggest improvements :)
- Selects the email input value.
- Splits the email by name, domain, and TLD.
- Sanitizes white spaces.
- Compares using Slevenshtein Distance if the email could be invalid.
- Reassemble the email with their corrected parts.
Add this tag before head ends --> <script type="text/javascript" src="/vendor/mailwatcher.min.js"></script>
Email checker only needs the id of the email input you want to check. Just remember to add a listener on this input to invoke the class when the element changes, like the example below:
var emailInput = document.getElementById('email');
emailInput.addEventListener('change', function() {
var w = new MailWatcher('email');
w.check();
});
Email Checker has two modes:
- Soft: (default mode) Prints a suggestion of a possible valid email.
- Hard: Instead of a valid email suggestion, hard mode corrects the email directly.
var w = new MailWatcher('email', {
mode: 'hard' // -> default 'soft'
});
This method is not available in hard mode.
There is a list of locales you can use. I'll show some examples:
{
en-EN : 'Did you mean <%= email %>?',
es-ES : 'Querías decir <%= email %>?',
ca-ES : 'Volies dir <%= email %>?',
pt-PT : 'Você quis dizer <%= email %>?',
it-IT : 'Intendevi <%= email %>?',
fr-FR : 'Vouliez-vous dire <%= email %>?'
// ...
}
Then just put the locale value:
var w = new MailWatcher('email', {
locale: 'haw-US' // -> default 'en-EN'
});
This method is not available in hard mode.
You can put a custom copy if you don't like the default ones. This method will overwrite locales, so if you have enabled any, the locale won't work.
var w = new MailWatcher('email', {
copy: 'Why not <%= email %>, huh?'
});
Don't forget to put <%= email %>
in your sentence to print the valid email in the suggestion.
This is to control the character distance between the 'invalid' email and the 'possible valid emails'.
var w = new MailWatcher('email', {
distance: 5 // -> default 1
});
This method is closely associated with the accuracy. The higher the number of distance characters the more dificult will be to find a fiable match.
The higher the accuracy, the more likely that matches the suggestion.
Accuracy values can be: highest
, high
, medium
, low
, lowest
. I recommend to put your accuracy between high
and low
.
var w = new MailWatcher('email', {
accuracy: 'high' // -> default 'medium'
});
- Check/validation for Top Level Domains.
- Create customs blacklist and whitelist. Now must be updated.
- Create all locales and add it as an optional external file.
- Support second TLD --> domain[.co.uk]
- Sanitize email for invalid characters and possible injections. --> encode