Question

I’m trying to create a simple form that will validate that the first password and the second password the user enter are indeed the same. And if so, I’d like to show an image to the right of password input that confirms this.

I’ve got most aspects of the code working. However, I can’t seem to get replaceWith() to work correctly. The code below will show the correct image if the user enters the first password, enters the second password and both are the same. However, if a user edits either the first or second password causing a discrepancy the replaceWith() isn’t changing the image to signal this.

Any insight into what I’m missing or using incorrectly would be great.

thanks!

Here is 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>';

Here is the 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" />');
        }
    });

Answer 1

Looks like you are removing the td.

Try something like this instead

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

Also, you are calling the function when the second input loses focus. So any change to the first one won’t register.

One quick thing you could do (untested) is check the status when either input loses focus. Something like

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

Of course, this would mean the red dot would show even before any password confirm text was entered. But it would fire again once that was done. And it should fire again if the user tries to alter the first field.