Question

my error message below, with a highlighted field is working perfectly. Except now the powers that be want a different functionality.
Currently the error messaging highlights the field with a red border, and on focus the border is removed. However, now the powers that be want the red highlighting to persist until the user hits submit onclick="return formSubmit()"

I’ve tried using a .submit function (removing the unbind and remove focus from the .focus function, but the red highlighting persists regardless.

<!--Jquery function to override JS alert with DOM layer alert message-->
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
   });

}

Answer 1

I was so narrow minded in my looking for a solution above – trying to tie the removeClass with the form submit (which had to many actions tied into it and would have been overly complicated).

Instead, I just did a remove class at the beginning of the error checking:

$("li").removeClass("alertRed");
$("input").removeClass("CO_form_alert");  
$("select").removeClass("CO_form_alert");