Function to tell the user about errors wont reveal error div

I have this function to validate an input field. When something is wrong it should write stuff into a div element (which it does!) and then reveal it through jQuerys $('#elementID').show('speed');.

I recently changed from checking if there was an error to checking how high the errorlevel is, solving a problem with a more complex error-reporting system.

The function looks like this:

function verifyKassaAle() {
    var TOS_K_alevalue = $('#TOS_K_ale').val();
    if (!(TOS_K_alevalue == "")) {
        if (TOS_K_alevalue <= 100) {
            if (TOS_K_alevalue > 0) {
                if (TOS_K_alevalue > 2) {
                    var a = confirm("Kassa ale on enemmän kuin 2%, onko tämä OK?");
                    if (a == true) {
                        if(errorlevel > 0) {
                            errorlevel = errorlevel - 1;
                        }
                        else if(errorlevel == 0) {
                            errorlevel = 0;
                        }
                    } else {
                        if(errorlevel > 0) {
                            errorlevel = errorlevel - 1;
                        }
                        else if(errorlevel == 0) {
                            errorlevel = 0;
                        }
                        showinfo = showinfo + 1;
                        info = "Kassa ale 开发者_如何学Pythonon yli 2%"
                    }
                } else {
                    if(errorlevel > 0) {
                        errorlevel = errorlevel - 1;
                    }
                    else if(errorlevel == 0) {
                        errorlevel = 0;
                    }
                }
            } else {
                errorlevel = errorlevel + 1;
                Errormsg = "Kassa ale on alle 0%";
            }
        } else {
            errorlevel = errorlevel + 1;
            Errormsg = "Kassa ale on yli 100%";
        }
    } else {
        errorlevel = errorlevel + 1;
        Errormsg = "Kassa ale on tyhjä!";
    }
    if(errorlevel == 0) {
        $('#errormsg').html('');
        $('#error').hide('fast');
        $('#TOS_K_ale_valid').html('<td><div class="ui-state-default ui-corner-all" title="Valid!" style="margin-bottom:-5px;"><span class="ui-icon ui-icon-check"></span></div></td>');
    } else {
        $('#errormsg').html(Errormsg);
        $('#error').show('fast');
        $('#TOS_K_ale_valid').html('<td><div class="ui-state-default ui-corner-all" title="Not valid!" style="margin-bottom:-5px;"><span class="ui-icon ui-icon-alert"></span></div></td>');
    }
    if(showinfo > 0) {
        $('#infotext_kale').html(info);
        $('#info').show('fast');
    } else {
        $('#infotext_kale').html('');
        $('#info').hide('fast');
    }
    $('#TOS_K_ale_valid').show('slow');
}

And the error/info divs look like this:

<div id="error" style="margin-top:5px;display:none;">
    <div class="ui-state-error ui-corner-all" style="padding:0.7em;font-size:13px;">
        <span class="ui-state-error-text">
            <span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;margin-bottom:-5px;"></span>
        </span>
        <strong>VIKA: </strong>
        <span id="errormsg"></span>
    </div>
</div>
<div id="info" style="margin-top:5px;display:none;">
    <div class="ui-state-highlight ui-corner-all" style="padding:0.7em;font-size:13px;">
            <span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;margin-bottom:-5px;"></span>
            <strong>Huom: </strong>
            <span id="infotext"></span>
    </div>
</div>

SO, I can call $('#error').show('fast') from firebugs' console BEFORE this function has been called and it shows the div nicely. However, after I have called the function everything gets all ft up.

I have spent many hours to get this working without success.

Regards,

Akke

You have this jQuery selector $('#TOS_K_ale_valid') and there is no element with id="TOS_K_ale_valid" in html.