Question

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

我正在尝试在未填充的输入下添加“Field Required”消息。所以我在每个表之后编写了一个额外的表行，其中包含一个包含错误消息的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();

这一行的作用是：

从你的$（this）开始，它找到最近的祖先[包括$（this）]这是一个div，上升到DOM树
在该div下找到所有具有'required'类的元素，并显示它们。

没有看到你的HTML是如何构造的，我的猜测是DOM树上最近的div元素包含你所有的.required元素。您需要将该语句中的'div'替换为DOM树中较低的元素，该元素只包含您要显示的$（this）和.required元素。

错误消息未显示和隐藏，具体取决于if语句

1 个答案: