jQuery：如何檢查輸入的每個部分是否完整？

我試圖建立一個表單，將主要混合輸入文本和選擇。一旦x個輸入完成，我想發射ajax。我試過了.change（）函數，但遇到了IE遇到的問題。jQuery：如何檢查輸入的每個部分是否完整？

例子：

<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問題。

將綁定綁定所有投入與模糊/ focusout，然後檢查所有輸入工作完成或有更好的方法嗎？

我現在所擁有的

$('#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

來源

2011-10-28 Jeff

定義「完整」。用戶可能希望選擇第一個「

更簡單和更一致的方法是綁定change事件，因爲該事件將不偏向於表單元素的類型。

HTML：

<form id="myform"> 
    <div id="section"> 
     <input name="baz" type="text" /> 
     <input name="bat" type="text" /> 
     <select name="foo"> 
      <option value=""></option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
     <select name="bar"> 
      <option value=""></option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
    </div> 
</form>

JQuery的：

$('select,input').change(function() { 
    var allgood = true; 
    $('#section').children().map(function() { 
     if (this.value.length.length < 1) { 
      allgood = false; 
     } 
    }); 
    if(allgood){ 
     $('#myform').submit(); 
    } 
});

DEMO：http://jsfiddle.net/AlienWebguy/5bcgW/

要考慮的事情：該代碼假定您的窗體域將直接子節點的<div id="section">家長。如果你改變你的結構，只需注意JQuery選擇器如何抓取map()函數的表單域。

來源

2011-10-28 17:55:01 AlienWebguy

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下一節的數據，然後一起工作。

來源

2011-10-31 21:42:33 Jeff

+1用於發佈您的最終結果。 – AlienWebguy

jQuery：如何檢查輸入的每個部分是否完整？

回答

相關問題