Recently, I created a script that allows for fading in and out an error container. Surprisingly, it seems to work perfectly in Firefox and Chrome but unfortunately fails to function altogether in Internet Explorer 8.
If you're interested, feel free to experiment with the fiddle by following this link: http://jsfiddle.net/mostafatalebi/8tw2x/
You can also examine the code snippets provided below:
Let's start with the CSS for the Container:
.error-box
{
filter:inherit;
width: auto;
display: inline;
padding: 5px;
border-radius: 5px;
-webki-border-radius: 5px;
-moz-border-radius: 5px;
direction: rtl;
text-align: right;
background-color: #C00;
color: white;
font-size: 13px;
width: 200px;
float: left;
margin-bottom: 5px;
opacity:inherit;
filter:inherit;
}
Next up, here is the HTML DOM structure:
<label class="form-label">Email</label><br />
<div class="form-field-holder">
<input id='email' type="text" name="email" class="form-input" />
<div class="error-box"><!-- jQuery --></div><br />
</div>
Finally, let's take a look at the jQuery code used to manage this process:
$(document).ready(function(e) {
var email = $("#email");
email.on('blur', function(){
console.log(email_regexp.test(email.val()));
if(!email_regexp.test(email.val()))
{
$(this).siblings('.error-box').fadeIn(600).text("رایانامه شما اشتباه است");
}
else
{
$(this).siblings('.error-box').fadeOut(600);
}
});
});