jQuery Simple Example

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>

    <div class="form-group">
        <input class="form-control" placeholder="Email" name="email" id="email" type="email" required>
        <span id="checkEmail"></span>
        <button id="validateBtn">Validate</button>
    </div>

CSS

body {
    padding: 5px;
}

label {
    font-weight: bold;
}

input[type=text] {
    width: 20em
}

p {
    margin: 1em 0 0;
}

JavaScript

//Email Regular Expression function
function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

//Email Validate function
function validate() {
    var email = $("#email").val();
    if (validateEmail(email)) {
      $("#checkEmail").text(email + " is valid :)");
      $("#checkEmail").css("color", "green");
    } else {
      $("#checkEmail").text(email + " is not valid :(");
      $("#checkEmail").css("color", "red");
    }
}

$(document).ready(function(){
	$("#email").keyup(validate);
  $("#validateBtn").click(validate);
});