创建一个循环输入的函数以检查它们是否为空白

Question

我正在尝试创建一个接受 div id 作为参数的函数，然后搜索该 div，检查是否所有必需的文本输入都已填充。

无法更改HTML，只能在页面中添加JS。

我不确定如何仅针对所需的输入，然后检查所有输入以查看它们是否完整。

checkinputs = function(block){

$('block > :input').keyup(function() {
    var $emptyFields = $('block :input').filter(function() {
        return $.trim(this.value) === "";
    });

    if (!$emptyFields.length) {
        alert("form has been filled");
    }
    else {
    alert("form is still missing input");
    }
  });
};

$('body').on("click", "#step_3", function(e){ 
checkinputs('#ctl00_MainContentHolder_StoreAddressEditorBilling_addressDiv');
});

我有这个小提琴中的所有代码：

http://jsfiddle.net/AebC6/1/

Answer 1

您的选择器未使用您传入的 block 参数。

$('block > :input').keyup(function() { ... });

上面的选择器正在寻找一个元素 <block> 并获取任何子 input 元素

使用block 作为参数，如下所示：

$(block).find(':input').keyup(function() { ... });

$(block).find(':input').filter(function() { ... });

http://jsfiddle.net/EGCWq/

Answer 2

checkinputs = function (block) {
    var notAllFilled = $(block).find('input').filter(function () {
        return $.trim(this.value) === "";
    });
    var alertText = notAllFilled ? "form is still missing input" : "form has been filled";
    alert(alertText);
}

$('body').on("click", "#step_3", function (e) {
    checkinputs('#ctl00_MainContentHolder_StoreAddressEditorBilling_addressDiv');
});

编辑：更新为非常详细的版本。 检查隐藏的输入并忽略它们。给出好的石灰背景和坏的浅绿色，并用粉红色的父背景显示它正在验证的那些。

还根据有效性调整“*”文本。

这完全取决于博客中元素的 id 结尾。

您需要清理它以进行生产！

checkinputs = function (block) {
    var validators = $(block).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) {
            myInput.css('background-color', 'lime');
            $(this).parent('td').prev('td').find('span').text(' ');
        } else {
            myInput.css('background-color', 'aqua');
            $(this).parent('td').prev('td').find('span').text('*');
        }
        return isFilled;
    }).length;
    validators.parent().css('background-color', 'pink');
    var inputCount = validators.length;
    var alertText = notAllFilled == inputCount ? "form has been filled" : "form is still missing input";
    alert(alertText);
};

$('body').on("click", "#step_3", function (e) {
    checkinputs('#ctl00_MainContentHolder_StoreAddressEditorBilling_addressDiv');
});