Question

I have a script that works great, but I have one small problem.

I just added to my script:

        if (isError) {
            $('html, body').animate({
                scrollTop: 0
            }, 2500);
        } else {
            $("#error-div").hide();
        }   

Now I have a problem. The last input validation set $(‘#input_1 input’) is hiding the error-div when I type something in the input. All the other inputs are red with background changes, but the error-div disappears – only when I remove the error from #input1, which is the last one in the script.

the last input turns off the div-error if there is no error ONLY in that input.

Can’t figure it out. Any suggestions would be great.

$(function () {
$('#rbSubmit').formValidator({
    scope: '#form_register',
    onError: function () {
        var isError = false;
        if ($('#input_38 textarea').hasClass('error-input')) {
            isError = true;
            $('#r38 div').css('background-color', '#C1272D').css('color', '#FFF');
            $("#error-div").show();
        } else {
            $('#r38 div').css('background-color', '#2F2F2F');
            $("#error-div").hide();
        }
        if ($('#input_39 input').hasClass('error-input')) {
            isError = true;
            $('#r39 div, #r39 input').css('background-color', '#C1272D').css('color', '#FFF');
            $("#error-div").show();
        } else {
            $('#r39 div').css('background-color', '#2F2F2F');
            $("#error-div").hide();
        }



       // LAST DIV ALONE WILL TURN OFF THE div-error!!!  HELP!!!


        if ($('#input_1 input').hasClass('error-input')) {
            isError = true;
            $('#r1 div, #r1 input').css('background-color', '#C1272D').css('color', '#FFF');
            $("#error-div").show();
        } else {
            $('#r1 div').css('background-color', '#2F2F2F');
            $("#error-div").hide();
        }
        if (isError) {
            $('html, body').animate({
                scrollTop: 0
            }, 2500);
        } else {
            $("#error-div").hide();
        }
    }
});
});

​

Answer 1

Why are you executing $(“#error-div”).show(); and $(“#error-div”).hide(); within each if else block? Surely if an error has been detected you can perform it at the end:

if (isError) {
    $('html, body').animate({
        scrollTop: 0
    }, 2500);
    $("#error-div").show();
} else {
    $("#error-div").hide();
}

What jQuery plugin are you using for the validation?