Question

I’ve got a custom errorPlacement function that is updating a seperate message container with a custom way of displaying error messages.

As part of the form I’m validating, I have a fair number of input text boxes to validate (think lines of numbers being checked against some kind of result), and as part of this need the error messages to only show once in my custom container.

My code looks like this:

errorPlacement: function(errorMessageElement, field) {  
    if(errorMessageElement[0].innerHTML != "") {
        if(!$("#alertbar ul li.error").length) { window.scrollTo(0,0); }

        var errorMessageText = errorMessageElement[0].innerHTML;
        var errorLine = errorMessageElement.attr('for').substr(0,4);
        var countIdenticalLineMessages = $("#alertbar ul li[id~='" + errorLine + "']:contains('" + errorMessageText + "')").length;

        var errorMessageId = "error-" + errorMessageElement.attr('for');

        if (countIdenticalLineMessages < 1) {   
            if(!$("#alertbar ul li[id='" + errorMessageId + "']").length) {
                $('#alertbar ul').append("<li id='" + errorMessageId + "' class='error' />");   
            }
            var fieldErrorContainer = $("#alertbar ul li[id='" + errorMessageId + "']");
            var errorContainerHTML = "<span class='hide'>Error - <\/span>" + errorMessageElement[0].innerHTML;      
            fieldErrorContainer.html(errorContainerHTML);
        } else {
            var newErrorLineId = "lineerror-" + errorMessageElement.attr('for').substr(0,4);    
            if(!$("#alertbar ul li[id='" + newErrorLineId + "']").length) {
                // the below line doesn't fire till somewhere else on the page is clicked.
                $("#alertbar ul li[id='" + errorMessageId + "']").attr("id", newErrorLineId);   
            }
            var currentLineList = [];
            if($("#alertbar").data(errorLine)) { currentLineList = $("#alertbar").data(errorLine); }

            if(currentLineList.indexOf(errorMessageElement.attr('for')) == -1) { currentLineList.push(errorMessageElement.attr('for')) };
            $("#alertbar").data(errorLine, currentLineList);
        }
        CoreErrorHandling.updateErrorSummary();
    };

}

But the bit that switches the id of the line error li isn’t firing till I click away from the focussed element, or tab away.

Is errorPlacement firing too quick for it to respond or am I missing something?

Answer 1

No worries, I found the problem: I’d got a couple of the lines in the wrong order right in the middle, so the event was always firing late! Somedays it’s hard to see the wood for the trees!