Speed up development with full-stack environments for every branch.

Learn More

Basic Mailcheck.js Example [validation]

Forked from How to use the jQuery $().ready function.

393 Runs 829 Views 514 Copies


gtsolutions 373

published 4 years ago

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <title>Mailcheck Demo</title>
        <link href="css/demo.css" rel="stylesheet">
        <p class="prompt">Enter an email with a typo like [email protected] and click outside it.</p>
        <form id="mailcheck-test">
            <label for="email">Email</label>
            <input id="email" type="text" placeholder="Email">
            <div id="hint"></div>

        <script src="js/jquery.js"></script>
        <script src="js/mailcheck.js"></script>
        <script type="text/javascript">
            var $email = $('#email');
            var $hint = $("#hint");

            $email.on('blur',function() {
                $hint.css('display', 'none').empty();
                    suggested: function(element, suggestion) {
                        if(!$hint.html()) {
                            // First error - fill in/show entire hint element
                            var suggestion = "Did you mean <span class='suggestion'>" +
                                "<span class='address'>" + suggestion.address + "</span>"
                                + "@<a href='#' class='domain'>" + suggestion.domain + 
                        } else {
                            // Subsequent errors

            $hint.on('click', '.domain', function() {
                // On click, fill in the field with the suggestion and remove the hint
                $hint.fadeOut(200, function() {
                return false;
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).