Correct use of .replaceWith() to create a password validator

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 t开发者_JAVA百科his.

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

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.

This is only going to fire when the confirm box loses focus. If they alter #pass_one's value and it loses focus, this won't get fired again.

Could you do .append() instead of replaceWith()? Then you just append the image to after the td. $('#pass_status').append('<img src="images/greendot.png" />');

There are currently a few problems with your code.

1. As Jason pointed out, you are replacing the original <td id="pass_status"></td> with the contents of your replaceWith statement.
2. The other problem is that you only detect when the password input for confirmation loses focus. If they change the value of the first password box that event doesn't trigger and your function doesn't run.
3. For what you are doing it would make more sense to use the event blur rather than focusout. The latter will detect when any parent elements lose focus and while that won't necessarily happen in your scenario, it's still best to avoid unnecessary complexity.

Here's the revised JS to make it work:

$('#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" />');
  });
});

Along with checking for confirmation when either of the values is blurred, it actually makes sure not to give the user an error until they typed in the second password.

The reason I use .html() instead of .replaceWith() is because it replaces the insides of the element I'm referencing (#pass_status) rather than the element itself.

Areas that you can still improve my code in (if you feel like puzzling your brain a little):

1. Getting rid of the unbind on each blur of #pass_one
2. Finding a way to make this work if the user types in the confirmation password first and then the first password