驗證與AJAX/JQUERY和輸入

Question

改變的CSS多個輸入我有具有相同名稱的多個輸入和支架等的一種形式：我使用的括號

<input name=foo[] id=foo[]/> 

處理輸入作爲陣列與PHP，並且因爲輸入的數量不固定。

我試圖添加一些表單驗證與AJAX/JQUERY，因爲每個輸入必須包含一個已經在數據庫中的值。一旦選中，我想將輸入的CSS更改爲綠色，如果正確則更改爲紅色，如果輸入錯誤則更改爲紅色。

AJAX的部分工作，但我不能讓JQUERY改變單獨輸入的CSS（所有輸入改變）;

下面是我使用的代碼：

<script> 
    $(document).change(function() { 
    $('input[id="foo[]"]').each(function() { 
     $(this).change(validate); 
    }); 
    }); 

    function validate() { 
    var foo = $(this).val(); 
    if(foo == "" || foo.length < 4) { 
     $('input[id="foo[]"]').css('border', '3px #C33 solid'); 
    } else { 
     jQuery.ajax({ 
     type: "POST", 
     url: "common/check.php", 
     data: 'foo='+ foo, 
     cache: false, 
     success: function(response) { 
      if(response == 0) { 
      $('input[id="foo[]"]').css('border', '3px #C33 solid'); 
      } else { 
      $('input[id="foo[]"]').css('border', '3px #00FF00 solid'); 
      } 
     } 
     }); 
    } 
    } 
</script> 

感謝您的幫助！

Answer 1

我已經修改了你的代碼試試這個：。

$('input[id="foo[]"]').change(function() { 
    var foo = $(this).val(); 
    var fooInput = $(this); 
    if(foo == "" || foo.length < 4) { 
     fooInput.css('border', '3px #C33 solid'); 
    } else { 
     jQuery.ajax({ 
     type: "POST", 
     url: "common/check.php", 
     data: 'foo='+ foo, 
     cache: false, 
     success: function(response) { 
      if(response == 0) { 
      fooInput.css('border', '3px #C33 solid'); 
      } else { 
      fooInput.css('border', '3px #00FF00 solid'); 
      } 
     } 
     }); 
    } 
    }); 

這裏的FIDDLE

注意：避免與有元素相同的ID，當你的項目擴展時，它會讓你頭痛，

Answer 2

嘗試刪除「「」

$('input[id=foo[]]').css('border', '3px #C33 solid');