Jquery 创建一个函数，该函数通过循环输入来检查输入是否为空

我试图创建一个函数，它接受一个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');
});

我在这把小提琴里有所有的代码：

---

您的选择器没有使用要传入的

块

参数

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

上面的选择器正在查找元素

，并获取任何子

输入

元素

使用

块

作为参数，如下所示：

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

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

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

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

这完全取决于blog中元素的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');
});

---

假设该块是排序对象，$（'：input'，block）也可以工作。应该是一样的。嗨，马克，我用你的代码更新了我的小提琴。它开始工作了,但是它仍然说,即使输入都填好了,也有空白输入,而且它似乎没有只检查必填字段。仅供参考，请注意您的“手机”在白色背景上有一个白色“*”，并且是基于“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');
});