Animated Tool Tip in CSS3,Email Validation with JavaScript

Email Format Incorrect!

Cool Animated Tool tip Validation of Email Address

This is a tutorial on how to create tool tip alert for any invalid entry into a textbox. Here i am telling you how to create a tool tip on onblur event of textbox.

Whenever you type any value into a textbox and its value is correct then it will not show tool tip notification but if you type wrong value and leave the textbox then it will show a tooltip for correct the value.
This is a tutorialfor checking the email address. type an email into it and leave the text box if your email is in valid format then it will not show tooltip but if it is invalid then it show you the tooltip

Type any value in above text box and check your email format is valid or invalid if valid it will not show any thing but if invalid then it will show a tooltip.

The code of above technique is as follows----

Code for creating tooltip

<div id="tooltip" style="background: #666; border-radius: 4px; color: white; display: none; height: 25px; left: 20px; position: absolute; top: 180px; width: 188px;">
<div style="font-size: 12px; margin: 4px 0 0 27px; position: absolute; z-index: 2;">
Email Format Incorrect!</div>
<div style="background: #666; height: 20px; margin-left: 15px; margin-top: 10px; transform: rotate(45deg); width: 20px;">
</div>
</div>

Code for animate the tooltip-

<style type="text/css">
#tooltip{
animation:hex infinite ease-in-out 1s;
    }
    @-moz-keyframes hex
    {
        from{margin-top:0px}
        to{margin-top:1px}
    }
</script>

code for checking email address validity--

<script type="text/javascript">
function checkEmail(obj,obj1)
    {
        obj.style.border="";
        obj1.style.display='none';
        var exp=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
        if(obj.value=="")      
        {
            obj1.style.display='block';
            obj1.focus();
        }
        else if(!exp.test(obj.value))
        {
            obj.style.border='2px solid #ff3b4e';
            obj1.style.display='block';
           
        }
       
    }
</script>

Code for calling it:-

<input type="textbox" onblur="checkEmail(this,document.getElementById('tooltip'))" onfocus="document.getElementById('tooltip').style.display='none'">

Tweet