0

我有一个函数可以遍历表单的所有输入并检查它们是否已填写。如果该字段为空白，则使该特定输入变为粉红色并返回 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/

4

1 回答 1

0

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

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

这条线的作用是：

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

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

于 2013-05-01T15:48:49.590 回答