jQuery Validation Tooltip

When my text input validates as an email address I want a tooltip to show. The jQuery code below doesn't work. Can anyone help me with this?

Here is the code:

<script language="javascript" type="text/javascript">

$(document).ready(function() {

$('.email').focusout(function(){

$('.email').filter(function(){
var emil=$('.email').val();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if( !emailReg.test( emil ) ) {
$(this).tooltip({
content: "<div style=\"position: relative; top: -20px; right: -500px; background-color: #444; padding: 6px; width: 180px; height: 60px; color: #fff;\">Please enter a valid email address.</div>"});
}
})
});

});

</script>


<input type="email" class="ui-tooltip-content email" id="tooltip-1" name="tooltip-1" size="61">

 

I meant when my email doesn't validate not when it does.

 

Try this:

<input type="email" class="" name="email">

Code (markup):

$('input[type=email]').blur(function() {
  if (!validateEmail($(this).val())) {
    //do your tooltip stuff
  }
})

  function validateEmail(emailaddress) {
     var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
     if (emailReg.test(emailaddress) == false) {
         return false;
     } else {
         return true;
     }
   }

Code (markup):

 

For the tooltip stuff I added:
$("#tooltip-1").tooltip({
content: "<div style=\"position: relative; top: -20px; right: -500px; background-color: #444; padding: 6px; width: 180px; height: 60px; color: #fff;\">Please enter a valid email address.</div>"});

but it didn't work.

 

Thanks anyway.

 

If you added that exactly, of course it won't work, since I changed the id on the input...? And you can skip the escaped double quotes, just wrap it in single quotes instead

 

I used

<input type="email" class="ui-tooltip-content email" id="tooltip-1" name="tooltip-1" size="61">

 

You say it doesn't work - do you get anything at all, errors in console, does the content appear in the DOM...?

 

Hm - are you using the jQuery UI tooltip for this? If you are, what you're doing won't ever work. Simply because you're trying to use it in a way it's not intended for. First of, the tooltip is only shown when the user hovers over the content - which a user probably will do, by all means, but it's not wise to show errors this way. Second, the tooltip functionality in jQuery UI bases its content on the "title"-attribute of the content - if you don't have a title attribute, it won't have anything to show. Also, you can't assign html-content as you've done in the example, as that won't work. To use HTML content (which there is no real reason for, you can style what is shown by using a CSS-class) you'll have to assign a function for returning the html content.

But, to have it show your custom content, you will have to assign that content to the title-attribute of the element.

 

This works but the content shifts downward. Is there a way to make the content not shift downward?
$('input[type=email]').blur(function() {
if (!validateEmail($(this).val())) {
$(this).removeClass("blur").addClass("focus");
var txt = "Please enter a valid email address.";
var newDiv = $('<div style=\"position: relative; top: -20px; right: -300px; background-color: #444; padding: 6px; width: 180px; height: 60px; color: #fff;\"></div>').text(txt);
$('#tooltip-1').append(newDiv);
} else {
$(this).removeClass("focus").addClass("blur");
}
})

function validateEmail(emailaddress) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if (emailReg.test(emailaddress) == false) {
return false;
} else {
return true;
}
}