Question

I have an error layer that is presented on a form for an invalid/blank entries. When that error layer is presented, I want the current field to lose focus. In IE, I can’t get this to work. The focus is always remaining in the field.

    <!--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");
            $("input,select,radio,checkbox").focus(function(){
                $(this).unbind('focus'); // remove this handler
                $('.errorPopup').hide(); // hide error popup

            });


        }
     }
}

I’ve tried (‘body’).focus(); and $(“#”+inputID).focusout(); which also don’t work.

I also tried:

div.css({"display":"block"});
$("input,select,radio,checkbox").blur();

and

$("input,select,radio,checkbox").blur(function(){
                $(this).unbind('focus'); // remove this handler
                $('.errorPopup').hide(); // hide error popup

            });

but neither one works.

Answer 1

Use blur method.

$("input,select,radio,checkbox").blur();