Email Verification Using jQuery and API

Demo of comprehensive email validation using jQuery calling remote API

HTML

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<div class="container">
    <div class="row">
         <h3>About This Sample</h3>

        <p>Comprehensive email validation demo using <a href="https://api.emailverifyapi.com" rel="nofollow">RESTful API</a> for deep mailbox inspection and <a href="http://jqueryvalidation.org/">jQuery .validate()</a>. See full article at <a href="https://www.verifyemailaddress.io/Validate_Email/jQuery-Email-Validation-1" rel="nofollow">verifyemailaddress.io</a>.</p>
        
<h3>Email Address Syntax Validation Using jQuery .Validate With 3rd Party API For Deep Mailbox Inspection</h3>

        <p>Test Scenarios:</p>
        <ul>
            <li><em>Pelé@example.com</em> - should pass syntax validation but fail mailbox validation</li>
            <li><em>example.com</em> - should fail syntax validation</li>
            <li><em>Pelé@example.com.br</em> - should pass syntax validation but fail mailbox validation</li>
            <li><em>Pelé@bücher.com</em> - should pass syntax validation but fail mailbox validation</li>
            <li><em>[email protected]</em> - should pass syntax validation and pass mailbox validation</li>
        </ul>
        <form id="myForm">
            <div class="form-group">
                <label class="control-label" for="myEmail">Email:</label>
                <div class="input-group"> <span class="input-group-addon">@</span>

                    <input class="form-control" placeholder="Enter email address" name="myEmail" id="myEmail" type="text" />
                </div>
            </div>
            <div id="validationResult" class="margin-bottom-15">&nbsp;</div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>

CSS

.statusUnknown {
    color: #c1c72c;
}
.statusOk {
    color: #009933;
}
.statusBad, .errorMsg {
    color: #ff0000;
}

JavaScript

/*Output result to the 'validationResult' div element*/

function reportResult(data) {
    var status = data['status'].toLowerCase(); // get 'status' from REST response
    var additionalStatus = data['additionalStatus']; // get 'additionalStatus' from REST response
    var message = data['Message']; // if there is an error (e.g. license issues), a notification will appear in the 'Message" from REST response.

    console.log(status);
    console.log(additionalStatus);
    console.log(message);

    var statusHtml;

    // if there is an error message, show here
    if (message != null && message != '') {
        statusHtml = "<span class='errorMsg'>Error. Message='" + message + "' .</span>";
    } else {
        // map REST response data to presentation messages.
        switch (status) {
            case 'ok':
                statusHtml = "<span class='statusOk'>Email address is ok.</span>";
                alert('Email address validated to deep mailbox level. Ok to submit form...');
                break;
            case 'bad':
                statusHtml = "<span class='statusBad'>Email address is not valid.</span>";
                alert('Email address is not valid accoring to mail server inspection. Recommendation is not to process, submit form');
                break;
            default:
                statusHtml = "<span class='statusUnknown'>Unable to validate email. Reason=" + additionalStatus + "</span>";
                break;
        }
    }

    console.log(statusHtml);

    // present the result on screen
    $('#validationResult').html(statusHtml);
}

$('#myForm').validate({
    rules: {
        myEmail: {
            minlength: 3,
            maxlength: 255,
            required: true,
            email: true
        }
    },
    highlight: function (element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
...