1

ユーザーが入力した最初のパスワードと2番目のパスワードが実際に同じであることを検証する簡単なフォームを作成しようとしています。もしそうなら、これを確認するパスワード入力の右側に画像を表示したいと思います。

コードのほとんどの側面が機能しています。ただし、replaceWith（）を正しく機能させることができないようです。以下のコードは、ユーザーが最初のパスワードを入力し、2番目のパスワードを入力し、両方が同じである場合に正しい画像を表示します。ただし、ユーザーが最初のパスワードまたは2番目のパスワードのいずれかを編集して不一致が発生した場合、replaceWith（）は画像を変更してこれを通知しません。

私が見逃しているものや間違って使用しているものについての洞察は素晴らしいでしょう。

ありがとう！

HTMLは次のとおりです。

            echo '<form id="collect" action="add_new_user.php" method="POST" >';
                echo '<table class="sign_up">';

                    // ask to create login
                    echo '<tr><td><h2 class="nl">Login email</h2></td><td><input type="text" name="login_email" id="login_email" class="log" /></td><td><p id="email_status"></p><td></tr>';

                    // ask to create password
                    echo '<tr><td><h2 class="nl">Enter password</h2></td><td><input type="password" name="pass_one" id="pass_one" class="log" /></td></tr>';

                    // ask to confirm password 
                    echo '<tr><td><h2 class="nl">Confirm password</h2></td><td><input type="password" name="pass_confirm" id="pass_confirm" class="log" /></td><td id="pass_status"></td></tr>';

                    echo '<tr><td><input id="register" type="submit" value="Finish registration!" class="begin_mod_button" /></td></tr>';
                echo '</table>';
            echo '</form>';

jQueryは次のとおりです。

    $('#pass_confirm').focusout(function(login){
        var confirm = $(this).val();
        var pass = $('#pass_one').val();
        if(confirm == pass){
            $('#pass_status').replaceWith('<img src="images/greendot.png" />');
        }
        else{
            $('#pass_status').replaceWith('<img src="images/reddot.png" />');
        }
    });
4

4 に答える 4

2

を削除しているようですtd。

代わりにこのようなものを試してください

.replaceWith('<td><img src="images/greendot.png" /></td>');

inputまた、2番目がフォーカスを失ったときに関数を呼び出しています。したがって、最初の変更は登録されません。

簡単にできること（テストされていない）の1つは、どちらかinputがフォーカスを失ったときにステータスを確認することです。何かのようなもの

$('#pass_confirm, #pass_one').focusout(function(login){

もちろん、これは、パスワード確認テキストが入力される前でも赤い点が表示されることを意味します。しかし、それが行われると、それは再び発火するでしょう。また、ユーザーが最初のフィールドを変更しようとすると、再度起動するはずです。

于 2011-08-09T16:48:30.300 に答える
0

これは、確認ボックスがフォーカスを失ったときにのみ発生します。それらが#pass_oneの値を変更し、フォーカスを失った場合、これは再び発生しません。

于 2011-08-09T16:50:05.383 に答える
0

.append()代わりにできますreplaceWith()か？次に、の後に画像を追加するだけですtd。$('#pass_status').append('<img src="images/greendot.png" />');

于 2011-08-09T16:53:19.623 に答える
0

現在、コードにいくつかの問題があります。

  1. ジェイソンが指摘したように、あなたはオリジナルをあなたのステートメント<td id="pass_status"></td>の内容に置き換えています。replaceWith
  2. もう1つの問題は、確認用のパスワード入力がフォーカスを失ったときにのみ検出することです。最初のパスワードボックスの値を変更した場合、そのイベントはトリガーされず、関数は実行されません。
  3. blurあなたがしていることについては、よりもイベントを使用する方が理にかなっていますfocusout。後者は、親要素がフォーカスを失ったときに検出します。これは必ずしもシナリオで発生するわけではありませんが、不必要な複雑さを回避するのが最善です。

これが機能するように改訂されたJSです：

$('#pass_one').blur(function(){
  $('#pass_confirm').trigger('blur').unbind('blur.confirmation').bind('blur.confirmation', function() {
    $('#pass_status').html($(this).val() === $('#pass_one').val() ? '<img src="images/greendot.png" />' : '<img src="images/reddot.png" />');
  });
});

いずれかの値がぼやけている場合の確認をチェックするとともに、実際には、2番目のパスワードを入力するまでユーザーにエラーが発生しないようにします。

.html()代わりに使用する理由は、要素自体ではなく、.replaceWith()参照している要素（）の内部を置き換えるためです。#pass_status

あなたがまだ私のコードを改善することができる領域（あなたがあなたの脳を少し困惑させたいと思うなら）：

  1. の各ぼかしでバインド解除を取り除く#pass_one
  2. ユーザーが最初に確認パスワードを入力し、次に最初のパスワードを入力した場合に、これを機能させる方法を見つける
于 2011-08-09T17:14:57.670 に答える