3

更新 ブードゥー教のjqueryの謎を思いつくのは早かったと思います。「ユーザー名」ID を 2 回使用していることに気付きました。これが問題です。2 番目のユーザー名 ID は、php からページに挿入された html コードを介してページに追加されたため、最初はソースに表示されませんでした..

私はこのクライアント側の検証jqueryコードを書いています:

username = $("#username").val();

if (username.length < 5 || username.length > 15 || !username_regex.test(username)) {
                error += "invalid username\n";
                $(this).find("label[for='username']").css("color", "red");
                $("#username").css("background-color", "#ffc9c9").css("border-color", "red"); //this doesn't work
                // $("input[id='username']").css("background-color", "#ffc9c9").css("border-color", "red");  //this works
            }

そしてhtml：

  <p><label for="username">Username</label><input id="username" type="text" name="username"/></p>

パスワード、電子メール、名などのために、上記とまったく同じjquery/htmlブロックがいくつかあります..

この検証コードは onsubmit ハンドラーの一部であり、他のすべてのブロックは正常に機能しています。フィールドが検証基準を満たしていない場合、ラベルの色は赤に変わり、入力フィールドの背景色は #ffc9c9 に変わります。

問題はユーザー名にあります。ラベルは赤くなりますが、入力フィールドは #ffc9c9 になりません。それが機能しない理由はわかりません。同じ行を使用します。

 $("#*input_field_id*").css("background-color", "#ffc9c9").css("border-color", "red");

他のすべてのブロックに対して、それはうまく機能します。

コメント行も参照してください。

$("input[id='username']").css("background-color", "#ffc9c9").css("border-color", "red");

動作し、私のニーズを解決します。しかし、それは謎を解決しません.なぜ上記の行が機能しないのかを理解しようとしています. また、firebug を使用してデバッグし、期待どおりの結果が得られたことにも注意してください。たとえば、次のようになります。

$("#username").attr("name"); // = username, as expected

$("input[id='username']")結局のところ、cssを変更しようとするとうまくいくのに、うまくいかないのはなぜ$("#username")ですか?

4

3 に答える 3

0

このjsfiddleは #username の動作を示しています。しかし、失敗したように見えるので、エラーに値を割り当てる行を削除する必要がありました。

コード：

 if (username.length < 5 || username.length > 15 || !username_regex.test(username)) {
     $(this).find("label[for='username']").css("color", "red");
     $("#username").css("background-color", "#ffc9c9").css("border-color", "red");
 }

追加した：

if ブロックの前にエラー文字列を初期化すると、次のように機能します。

 username = 'aaa';
 error = '';
 if (username.length < 5 || username.length > 15 || !username_regex.test(username)) {
     error += "invalid username\n";
     $(this).find("label[for='username']").css("color", "red");
     $("#username").css("background-color", "#ffc9c9").css("border-color", "red");
 }
于 2013-10-05T10:16:36.927 に答える