Function to show or hide validation error messages I'm a bit clumsy at writing JavaScript.  I have some nice code like this:

(function($){
    $.fn.forceNumeric = function(){
        return this.each(function(){
            $(this).keyup(function(){
                if (!/^[0-9]+$/.test($(this).val())){
                    $(this).val($(this).val().replace(/[^0-9]/g, ''));
                }
            });
        });
    };
})(jQuery);


I know what it does and how it works. I can call the function and I see why it works.

For the life of me, I cannot figure out how to use that same elegant style/approach for my Neanderthal function:

function showHideErrorBox(theFriendlyName, check){
     var topLevelDiv,
        numDivsAfter;

        if(check === 0){
        // REMOVE THE OLD ERROR MESSAGE IN THE ERROR BOX
            $('.form-validation-errors').find('div').each(function(){
                if( $(this).html().indexOf(theFriendlyName) != -1 ){
                    $(this).remove();
                }
            });
        }

        //  CHECK WHETHER THE ENTIRE MESSAGE BOX CAN BE REMOVED NOW
        topLevelDiv = document.getElementById('alert-form-errors');
        numDivsAfter = topLevelDiv.getElementsByTagName('div').length;

        if(check === 0){
            if(numDivsAfter &lt;= 1){
                $('#alert-form-errors').hide();
            }

        }else if(check === 1){

            if(numDivsAfter &gt;= 1){
                $('#alert-form-errors').show();
            }    
        }
}


Can anyone help me out? Where do I start? I have Google'd for tutorials, but I have not been able to find something suitable for my needs.
You could start by minimizing your function calls. like so 

ORIGINAL

$.fn.forceNumeric = function(){
    return this.each(function(){
        $(this).keyup(function(){
            if (!/^[0-9]+$/.test($(this).val())){
                $(this).val($(this).val().replace(/[^0-9]/g, ''));
            }
        });
    });
};


OPTIMIZED

$.fn.forceNumeric = function(){
    return this.each(function(){
        $(this).keyup(function(){
            if (!/^[0-9]+$/.test(this.value)){
                this.value = this.value.replace(/[^0-9]/g, '');
            }
        });
    });
};



  Just in this little bit you have saved on 3 Function calls.


And on the larger part.

OPTIMIZED

function showHideErrorBox(theFriendlyName, check){
     var topLevelDiv,
         numDivsAfter;

        if(check === 0){
        // REMOVE THE OLD ERROR MESSAGE IN THE ERROR BOX
            $('.form-validation-errors').find('div').each(function() {
                var $this = $(this);
                if( $this.html().indexOf(theFriendlyName) !== -1 ){
                    $this.remove();
                }
            });
        }

        //  CHECK WHETHER THE ENTIRE MESSAGE BOX CAN BE REMOVED NOW
        topLevelDiv = $(document.getElementById('alert-form-errors'));
        numDivsAfter = topLevelDiv[0].getElementsByTagName('div').length;

        if(check === 0 &amp;&amp; numDivsAfter &lt;= 1) {
            return topLevelDiv.hide();
        }

        if(check === 1 &amp;&amp; numDivsAfter &gt;= 1) {
            return topLevelDiv.show();
        }    
}



  You have also saved on 3 Function calls here too;


Just remember that $ is a function and it's better to call a function once than twice right? 

if you ever have something like this 

$(this).show();
$(this).val('hello');
$(this).hide();


It should be like this

var $this = $(this);
$this.show()
this.value = 'hello';
$this.hide();