Question

I am using javascript form validation, and jquery to display the error messaging and to highlight the fields.

The current behavior is when you click submit, the validation runs returning an error message, and when a user clicks back into the field the error message disappears but the form highlighting (a red border around the field) remains – until the user submits the form again.

Additional behavior that’s needed (working in firefox but not in IE) is when an error state pops up, the field returning the error is supposed to lose focus, and the user has to click back into the field (which then removes the error message). In IE, the focus is never removed.

<script language="JavaScript" type="text/javascript">
<!--Jquery function to override JS alert with DOM layer alert message-->
function customAlert(){
    var args = arguments;
    if(args.length > 1) {
        // check that custom alert was called with at least two arguments
        var msg = args[0];
        $("li").removeClass("alertRed");
        $("input").removeClass("CO_form_alert");
        $("select").removeClass("CO_form_alert");
        var div = $(".errorPopup");
        div.css({"display":"block"});
        if (div.length == 0) {
            div = $("<div class='errorPopup' onclick='$(this).hide();'></div>");
            $("body").prepend(div);
        }
        div.html(msg);
        for(var i = 1; i < args.length; i++) {
            var inputID = args[i];
           $("#"+inputID).addClass("CO_form_alert").parent().addClass("alertRed");
            $("#"+inputID).focus(function(){
                $(this).unbind('focus'); // remove this handler
                $('.errorPopup').hide(); // hide error popup
            });
        }
     }
}

</script>

Answer 1

rather than unbind('focus') you could try blur()

EDIT:

Blur Event Does not get Fired in IE7 and IE6