Question

I am using 2 input fields, the first is the true one, the other will be hidden, just right behind it, using position:fixed; , when the user submits the form, there will be a Form Validation, if that original field is empty, the invisible input will show up, with a red background, with an alert message. this is working, by using .show() after it has had display:none; then I wrote another code in jquery, which makes this alert input go away, when the user clicks at it, means he’s trying to access back the original input so he can write in it, and this is working, by using .hide() ; the problem is, when I click submit again, the alert input isn’t showing up…again, in firefox; but it’s working completely good in IE.

Here is the HTML CODE:

 <div style="   padding-top:2px; overflow:hidden; float:left  ">
<div style="float:left; ">
<label for="email">
E-mail
</label> 
<br>
<div style="position:relative;">
<input class="inputtext" type="text" id="email" name="email" maxlength="32" style=" width:140px; height:15px;" tabindex=1/>
<input class="inputtext" type="text" id="emailnotification" name="emailnotification" maxlength="32" style=" width:140px; background-color: rgb(220, 20, 60); color: white; z-index:20; display:none; height:15px; font-weight: bold; position:absolute; left:0px;"/>
</div>
</div>

Now this is a part of the form validation function:

function validateForm()
{

    var xe;
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var xemail=document.forms["signinForm"]["email"].value;
    if(xemail==null || xemail=="")
        {$("#emailnotification").val("Email is Required");  
        $("#emailnotification").show();

            xe=1;
        }
    else if (reg.test(xemail)==false)
        {   

            $("#emailnotification").val("Email is not Valid");
            $("#emailnotification").show();
            xe=1;
        }

now this is the jquery code which hide it back:

    $("#emailnotification").click ( 
function() { 
$("#emailnotification").hide(); 
$("#email").focus(); 
$("#emailnotification").blur(); 
});

Answer 1

Works here in firefox

Although I changed the code a bit…

$("#emailnotification").blur(); is useless, since you focus elsewhere first.

(I also used Rodolfo suggestion)