0

次のような同じ名前と括弧を持つ複数の入力を持つフォームがあります。

<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>

ご協力いただきありがとうございます！

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 に答える