0

我有一个表单，它有多个具有相同名称和括号的输入，例如：

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

我使用方括号将输入作为数组处理，因为输入的数量不固定。

我正在尝试使用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>

谢谢你的帮助！

4

2 回答 2

1

尝试删除「"」。

$('input[id=foo[]]').css('border', '3px #C33 solid');
于 2013-08-28T00:16:01.183 回答
0

我已经修改了你的代码。试试这个：

 $('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。随着项目的扩展，它会让您头疼。

于 2013-08-28T00:20:29.557 回答