错误消息不显示和隐藏取决于 if else 语句

Question

我有一个函数循环遍历表单的所有输入并检查它们是否已填写。如果该字段为空白，则该特定输入变为粉红色并返回 false。

我正在尝试在未填写的输入下方添加“必填字段”消息。所以我在每行之后编写了一个额外的表格行，其中包含一个包含错误消息的 div。 div 的 css 在页面加载时设置为“display:none”。

现在我的函数对每个输入都显示为“必需”，而不仅仅是空白输入，而且粉红色仍然正常工作。

如何让“必需”的 div 像粉红色一样正确显示和隐藏？

checkinputs = function (blockOne,blockTwo) {
inputGood = true;
blOne = $(blockOne);
blTwo = $(blockTwo);
blInput = [blOne,blTwo];
for (x = 0; x < 2; x++) {
        var validators = blInput[x].find(" [id$='RequiredIndicator']").parent().parent('tr').find(':input:not(:hidden)');
        var notAllFilled = validators.filter(function(){
        var myInput = $(this); //.parent().parent('tr').find(':input');
        var filledVal = myInput.val();
        var isFilled = $.trim(filledVal).length;
            if (isFilled) {
                $(this).css('background-color', 'white');

                $(this).closest('div').find('.required').hide();

                $(this).parent('td').prev('td').find('span').text('*'); 
                }
            else {
            $(this).css('background-color', 'pink');

            $(this).closest('div').find('.required').show();

             $(this).parent('td').prev('td').find('span').text('*');            
            inputGood = false;  
            }
        return isFilled;
        }).length;
    var inputCount = validators.length;
};
    if( !inputGood ){
        $('#errorAlert').append('<span style="font-weight:bold;">"Some required    information is missing. Please complete the missing fields below."</span>' + '<br><br>');
        $('#errorAlertTwo').append('<span style="font-weight:bold;">"Some required credit card information is missing. Please complete the missing fields below."</span>' + '<br><br>');    
    }
    return inputGood;   
};

这里有一个问题： http://jsfiddle.net/RNMM7/

Answer 1

您的问题几乎肯定是您显示 div 的行：

$(this).closest('div').find('.required').show();

这一行的作用是：

1. 从您的 $(this) 开始，它会找到最近的祖先 [包括 $(this)]，它是一个 div，沿着 DOM 树向上移动
2. 在该 div 下查找所有具有“必需”类的元素，并显示它们。

在没有看到您的 HTML 结构的情况下，我的猜测是 DOM 树上最近的 div 元素包含您所有的 .required 元素。您需要将该语句中的“div”替换为 DOM 树中较低的元素，该元素仅包含您的 $(this) 和您要显示的一个 .required 元素。