Question

我的表单有多个输入，名称和括号如下：

<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[]]').css('border', '3px #C33 solid');

Answer 2

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

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

使用AJAX / JQUERY验证多个输入并更改输入的css

2 个答案: