jQuery:如何检查输入的每个部分是否完整？

Question

我正在尝试构建一个具有混合输入(主要是文本和选择)的表单。我想在 x 个输入完成后触发 ajax。我尝试过 .change() 函数，但遇到了 IE 问题。

示例:

<div id='section'>
    <input type=text>
    <input type=text>
    <select>
        <option></option>
        <option></option>
    </select>
    <select>
        <option></option>
        <option></option>
    </select>
</div>

我不需要提交按钮，我只想在所有 4 个输入完成后执行某些操作。正如我之前所说，.change() 在处理 select 时遇到了 IE 问题。

将所有输入与模糊/焦点绑定(bind)绑定(bind)，然后检查所有输入是否完整，是否有效，或者是否有更好的方法？

我现在有

$('#section input').bind($.browser.msie ? 'focusout' : 'blur', function(e) {
// blur also has issues with IE so look for focusout in IE
console.log($(this));
}

我不关心输入的填写顺序，我只想在所有 4 个输入都填写完毕后立即触发一个操作，在我的例子中是使用这些输入值进行 ajax 调用。

一些浏览器和 jQuery 信息。 我已经支持IE 6+了，而且各个主流浏览器下3个版本。 jQuery 1.6.2

Answer 1

Alien's answer引导我走向正确的方向。

这是一个注册表单，它具有三个不同的部分，全部由 AJAX 操作，并且 DOM 结构变得相当复杂。

我必须从两个不同的方向来处理它。

首先我必须知道每个部分的输入数量

var firstinputs = $('#firstFieldCollection input[type="text"], select).length;

这给出了我需要的输入数量，不包括用于 jQuery.UI 日历查找的按钮。

我做的第二件事是在 .change 事件上，因为我发现特定的输入将在 IE6+ 中工作。所以看起来像这样:

$('#firstFieldCollection input,select).change(function() {
    var itemcount = 0;
    $('#personalFieldsCollection input[type="text"], select').each(function(i,v) {
        if(v.value.length > 0) {
            itemcount++;
        }
    )};
    if(itemcount===firstinputs) {
        //Do something once all inputs are filled in.
    }
});

这使我能够捕获输入的第一部分，仅在字段填充后才允许 AJAX 触发，然后 AJAX 返回下一部分的数据以进行处理。