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
Saved

Saved

gtsolutions 373

gtsolutions
published 4 years ago

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Mailcheck Demo</title>
        <link href="css/demo.css" rel="stylesheet">
    </head>
    <body>
        <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>
        </form>

        <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();
                $(this).mailcheck({
                    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 + 
                                "</a></span>?";
                              
                            $hint.html(suggestion).fadeIn(150);
                        } else {
                            // Subsequent errors
                            $(".address").html(suggestion.address);
                            $(".domain").html(suggestion.domain);
                        }
                    }
                });
            });

            $hint.on('click', '.domain', function() {
                // On click, fill in the field with the suggestion and remove the hint
                $email.val($(".suggestion").text());
                $hint.fadeOut(200, function() {
                    $(this).empty();
                });
                return false;
            });
        </script>
    </body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).