How to add jQuery email validation in my site?

I want to add jQuery email validation in my site which is good looking also
simply copy and paste this code for add jQuery email validation for your site

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.7.1");
</script>

<script type="text/javascript">
    $(document).ready(function(){
        try {
        var domains =['hotmail.co.uk','yahoo.co.uk','yahoo.com.tw','yahoo.com.au','yahoo.com.mx','gmail.com','hotmail.com','yahoo.com','aol.com','comcast.net','msn.com','seznam.cz','sbcglobal.net','live.com','bellsouth.net','hotmail.fr','verizon.net','mail.ru','btinternet.com','cox.net','yahoo.com.br','bigpond.com','att.net','yahoo.fr','mac.com','ymail.com','googlemail.com','earthlink.net','xtra.co.nz','me.com','yahoo.gr','walla.com','yahoo.es','charter.net','shaw.ca','live.nl','yahoo.ca','orange.fr','optonline.net','gmx.de','wanadoo.fr','optusnet.com.au','rogers.com','web.de','ntlworld.com','juno.com','yahoo.com.sg','rocketmail.com','yandex.ru','yahoo.co.in','centrum.cz','live.co.uk','sympatico.ca','libero.it','walla.co.il','bigpond.net.au','yahoo.com.hk','ig.com.br','live.com.au','free.fr','sky.com','uol.com.br','abv.bg','live.fr','terra.com.br','hotmail.it','tiscali.co.uk','rediffmail.com','aim.com','blueyonder.co.uk','telus.net','bol.com.br','hotmail.es','email.cz','windowslive.com','talktalk.net','home.nl','t-online.de','yahoo.de','telenet.be','163.com','embarqmail.com','windstream.net','roadrunner.com','bluewin.ch','skynet.be','laposte.net','yahoo.it','qq.com','live.dk','planet.nl','hetnet.nl','gmx.net','mindspring.com','rambler.ru','iinet.net.au','eircom.net','yahoo.com.ar','wp.pl','mail.com'];
        var tdomains = [];
        $('#MERGE0').on('blur', function() {
          $(this).mailcheck({
            domains: domains,
            topLevelDomains: tdomains,
            suggested: function(element, suggestion) {
                var msg = 'Hmm, did you mean '+suggestion.full+'?';
                if ( $('#MERGE0_mailcheck').length > 0 ){
                    $('#MERGE0_mailcheck').html(msg);
                } else {
                    element.after('<div id="MERGE0_mailcheck" class="errorText">'+msg+'</div>');
                }
            },
            empty: function(element) {
                if ( $('#MERGE0_mailcheck').length > 0 ){
                    $('#MERGE0_mailcheck').remove();
                }
              return;
            }
          });
        });
        } catch(e){ console.log(e); }
    });
</script>

 

<style type="text/css">
.subfield label{
padding-left:4px;
font-style:italic;
}
.mergeRow td{
padding:12px;
border-top:1px solid #ccc;
}
input,textarea,select{
padding:4px;
}
input:focus,textarea:focus,select:focus{
background:#ffc;
}


</style></head>
<form action="" method="POST">
<table cellpadding="7" cellspacing="0" width="100%" align="center" class="mergeTable">

<tr class="mergeRow dojoDndItem mergeRow-email" id="mergeRow-0">
<td class="formText" align="right">
    <label for="MERGE0"><strong>Email Address</strong> <span class="asterisk">*</span></label>
</td><td>
    <input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="">
    </td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="mc_submit_button">

<input type="submit" class="button" value="Subscribe to list">
</td>
</tr>
</form>
</table>