CODEWITHSUNDEEP
javascriptjqueryvalidationfocus
Jason
Jason

Reputation: 7682

Clear error message (jquery) on input field focus

function customAlert(inputID,msg){
   var div = $(".errorPopup");
   div.css({"display":"block"});
   $("#"+inputID).addClass("CO_form_alert").parent().addClass("alertRed");
   if (div.length == 0) {
     div = $("<div class='ErrorPopup' onclick='$(this).hide();'></div>");
     $("body").prepend(div);
   } 
   div.html(msg)
}

I am using the above jquery to hijack my form's javascript validation and error handling. It's working well, except I need to clear the error messaging and styling once the user clicks back into the field to correct it.

EDIT:

based on answers below, got it working - but I need to remove the focus on the field for IE (it already does this in firefox) - 

<!--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

            });
        }
     }
}

Upvotes: 0

Views: 6780

Answers (3)

abhijit
abhijit

Reputation: 1968

$(":input").keypress(function(event) {
    $(".ErrorPopup").html("");
});

Upvotes: 2

Naftali
Naftali

Reputation: 146300

Try this:

function customAlert(inputID,msg){
   var div = $(".errorPopup");
   div.css({"display":"block"});
   $("#"+inputID).addClass("CO_form_alert").parent().addClass("alertRed");
   if (div.length == 0) {
     div = $("<div class='errorPopup' onclick='$(this).hide();'></div>");
     $("body").prepend(div);
   } 
   div.html(msg);

   $("#"+inputID).focus(function(){
        $(this).unbind('focus'); // remove this handler
        $(this).removeClass("CO_form_alert")
               .parent().removeClass("alertRed"); // undo changes
        $('.errorPopup').hide(); // hide error popup
   });

}

Upvotes: 0

FishBasketGordo
FishBasketGordo

Reputation: 23142

Hide the error popup div on the input's focus event:

$('#' + inputID).focus(function() { $('.ErrorPopup').hide(); });

Upvotes: 1

Related Questions