HTML5 e CSS3 - Validação de email real

Baixe o plugin jquery antes e instale conforme abaixo, na pasta js.

<script src="js/jquery.min.js" type="text/javascript"></script>

<script>

(function( $ ) {
    $.fn.mailgun_validator = function(options) {
        return this.each(function() {
            var thisElement = $(this);
            thisElement.focusout(function(e) {
                //Trim string and autocorrect whitespace issues
                var elementValue = thisElement.val();
                elementValue = $.trim(elementValue);
                thisElement.val(elementValue);

                //Attach event to options
                options.e = e;

                run_validator(elementValue, options, thisElement);
            });
        });
    };

    function run_validator(address_text, options, element) {
        //Abort existing AJAX Request to prevent flooding
        if(element.mailgunRequest) {
            element.mailgunRequest.abort();
            element.mailgunRequest = null;
        }

        // don't run validator without input
        if (!address_text) {
            return;
        }

        // validator is in progress
        if (options && options.in_progress) {
            options.in_progress(options.e);
        }

        // don't run dupicate calls
        if (element.mailgunLastSuccessReturn) {
            if (address_text == element.mailgunLastSuccessReturn.address) {
                if (options && options.success) {
                    options.success(element.mailgunLastSuccessReturn, options.e);
                }
                return;
            }
        }

        // length and @ syntax check
        var error_message = false;
        if (address_text.length > 512)
            error_message = 'Email address exceeds maxiumum allowable length of 512.';
        else if (1 !== address_text.split('@').length-1)
            error_message = 'Email address must contain only one @.';

        if (error_message) {
            if (options && options.error) {
                options.error(error_message, options.e);
            }
            else {
                if (console) console.log(error_message);
            }
            return;
        }

        // require api key
        if (options && options.api_key == undefined) {
            if (console) console.log('Please pass in api_key to mailgun_validator.');
        }

        // timeout incase of some kind of internal server error
        var timeoutID = setTimeout(function() {
            error_message = 'Error occurred, unable to validate address.';
            if (!success) {
                //Abort existing AJAX Request for a true timeout
                if(element.mailgunRequest) {
                    element.mailgunRequest.abort();
                    element.mailgunRequest = null;
                }

                if (options && options.error) {
                    options.error(error_message, options.e);
                }
                else {
                    if (console) console.log(error_message);
                }
            }
        }, 30000); //30 seconds

        // make ajax call to get validation results
        element.mailgunRequest = $.ajax({
            type: "GET",
            url: 'https://api.mailgun.net/v2/address/validate?callback=?',
            data: { address: address_text, api_key: options.api_key },
            dataType: "jsonp",
            crossDomain: true,
            success: function(data, status_text) {
                clearTimeout(timeoutID);

                element.mailgunLastSuccessReturn = data;
                if (options && options.success) {
                    options.success(data, options.e);
                }
            },
            error: function(request, status_text, error) {
                clearTimeout(timeoutID);
                error_message = 'Error occurred, unable to validate address.';

                if (options && options.error) {
                    options.error(error_message, options.e);
                }
                else {
                    if (console) console.log(error_message);
                }
            }
        });
    }
})( jQuery );

</script>

<script>
	$(function() {
	// capture all enter and do nothing
	$('#email').keypress(function(e) {
	if(e.which == 13) {
	$('#email').trigger('focusout');
	return false;
	}
	});
	if(!$('#name').val() || !$('#email').val() || !$('#fone').val() || !$('#msg').val()){
	return true;
	} else{
	}
	// capture clicks on validate and do nothing
	$("#validate_submit").click(function() {
	if(!$('#name').val() || !$('#email').val() || !$('#fone').val() || !$('#msg').val()){
	return true;
	}
	return false;
	});
	// attach jquery plugin to validate address
	$('#email').mailgun_validator({
	api_key: 'pubkey-83a6-sl6j2m3daneyobi87b3-ksx3q29',
	in_progress: validation_in_progress,
	success: validation_success,
	error: validation_error,
	});
	});
	// while the lookup is performing
	function validation_in_progress() {
	$('#status').html("<img src='images/loading.gif' height='16'/>");
	}
	// if email successfull validated
	function validation_success(data) {
	$('#status').html(get_suggestion_str(data['is_valid'], data['did_you_mean']));
	}
	// if email is invalid
	function validation_error(error_message) {
	$('#status').html(error_message);
	}
	// suggest a valid email
	function get_suggestion_str(is_valid, alternate) {
	if (is_valid) {
	var result = '<span class="success">Address is valid.</span>';
	if (alternate) {
	result += '<span class="warning"> (Though did you mean <em>' + alternate + '</em>?)</span>';
	}
	return result
	} else if (alternate) {
	return '<span class="warning">Did you mean <em>' + alternate + '</em>?</span>';
	} else {
	return '<span class="error">Address is invalid.</span>';
	}
	}
	</script>