带有验证的奇怪脚本结果

Question

我有一个运行良好的脚本，但我有一个小问题。

我刚刚添加到我的脚本中：

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

现在我有一个问题。当我在输入中键入内容时，最后一个输入验证集 $('#input_1 input') 隐藏了错误 div。所有其他输入都是红色的，背景发生了变化，但error-div消失了——只有当我从#input1中删除错误时，这是​​脚本中的最后一个。

如果仅在该输入中没有错误，则最后一个输入将关闭 div 错误。

想不通。任何建议都会很棒。

$(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

你为什么要执行 $("#error-div").show();和 $("#error-div").hide();在每个 if else 块内？当然，如果检测到错误，您可以在最后执行它：

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

您使用什么 jQuery 插件进行验证？

Answer 2

尝试为 error-div 赋予比其他输入更高的 z-index：

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

请注意，您必须指定位置属性。