How would I create a way around password confirmation and email confirmation?

Question

Hello I have built a fully working form with ajax, jquery but I have come across a little problem.

Here is my code...

<form action="#" method="post">
<fieldset>
<legend>Login Details</legend>
<label>Your Email:</label><input id="email" name="email" type="text" onchange="return signup_ajax ('#email');" />
<label>Confirm Email:</label><input id="cemail" name="cemail" type="text" onchange="return signup_ajax ('#cemail');" />
<label>Password:</label><input id="password" name="password" type="text" onchange="return signup_ajax ('#password');" />
<label>Confirm Password:</label><input id="cpassword" name="cpassword" type="text" onchange="return signup_ajax ('#cpassword');" />
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label>Your Username:</label><input id="username" name="username" type="text" onchange="return signup_ajax ('#username');" />
</fieldset>

<input class="submit" type="submit" value="Create Account" />
</form>

function signup_ajax (id) {
var val = $(id).val();
$(id).after('<div class="loading"></div>');
if (id === '#email') {
    $('#email_error, #email_success').hide();
    $('.loading').delay(1000).hide(1);
    setTimeout(function () {
        $.post('http://www.example.com/ajax.php', {email: val},
        function (response) {
            finish_ajax (id, response);
        });
    }, 1050);
}
if (id === '#cemail') {
    var cemail_val = $('#email').val();
    $('#cemail_error, #cemail_success').hide();
    $('.loading').delay(1000).hide(1);
    setTimeout(function () {
        if (val !== cemail_val) {
            $(id).after('<div id="cemail_error" class="error">Emails do not match</div>');
        }
        else {
            $(id).after('<div id="cemail_success" class="success">Emails match</div>');
        }
    }, 1050);
}
if (id === '#password') {
    $('#password_error, #password_success').hide();
    $('.loading').delay(1000).hide(1);
    setTimeout(function () {
        if (val.length < 6) {
            $(id).after('<div id="password_error" class="error">Must be at least 6 characters</div>');
        }
        else {
            $(id).after('<div id="password_success" class="success">Success</div>');
        }
    }, 1050);
}
if (id === '#cpassword') {
    var cpassword_val = $('#password').val();
    $('#cpassword_error, #cpassword_success').hide();
    $('.loading').delay(1000).hide(1);
    setTimeout(function () {
        if (val !== cpassword_val) {
            $(id).after('<div id="cpassword_error" class="error">Passwords do not match</div>');
        }
        else {
            $(id).after('<div id="cpassword_success" class="success">Passwords match</div>');
        }
    }, 1050);
}
if (id === '#username') {
    $('#username_error, #username_success').hide();
    $('.loading').delay(1000).hide(1);
    setTimeout(function () {
        if (val.length < 3) {
            $(id).after('<div id="username_error" class="error">Must be at least 3 characters</div>');
        }
        else {
            $.post('http://www.example.com/ajax.php', {username: val},
            function (response) {
                finish_ajax (id, response);
            });
        }
    }, 1050);
}
} 

function finish_ajax (id, response) {
      $(id).after(response);
} 

if (isset($_REQUEST['email'])) {
$q = $dbc -> prepare("SELECT email FROM accounts WHERE email = ?");
$q -> execute(array($_REQUEST['email']));
if (!filter_var($_REQUEST['email'], FILTER_VALIDATE_EMAIL)) {
    echo '<div id="email_error" class="error">This is not a valid email</div>';
}
elseif ($q -> rowCount() > 0) {
    echo '<div id="email_error" class="error">Email already owns an account</div>';
}
else {
    echo '<div id="email_success" class="success">Success</div>';
}
}
elseif (isset($_REQUEST['username'])) {
$q = $dbc -> prepare("SELECT username FROM accounts WHERE username = ?");
$q -> execute(array($_REQUEST['username']));
if ($q -> rowCount() > 0) {
    echo '<div id="username_error" class="error">Username already taken</div>';
}
else {
    echo '<div id="username_success" class="success">Success</div>';
}
}
else {
header('Location: http://www.projectv1.com');
exit();
}

When a user enters a password that is not of the required length all works well. But if a user then continues to confirm the password with the same value as the previous password it will come up with passwords match as expected. But as the first one is incorrect they go back and change the first but the second still says it is a match how can I make it check it again if the value of id password is changed??

Same with email, if this makes sense??

Thanks for your time...

Answer 1

wouldn't using the jquery validation solve your problem, such a plugin would do all this for you, even when 2 validations collide...

read more about it here: http://docs.jquery.com/Plugins/Validation

and see demo's here: http://jquery.bassistance.de/validate/demo/

Answer 2

Do this in your code from above:

if (id === '#password') {
    $('#password_error, #password_success').hide();
    $('.loading').delay(1000).hide(1);
    setTimeout(function () {
        if (val.length < 6) {
            $(id).after('<div id="password_error" class="error">Must be at least 6 characters</div>');
        }
        else {
            signup_ajax ('#cpassword');
        }
    }, 1050);
}

But I would also recommend to use one of the already mentioned jQuery form validation plugins. And even if you still want to write your own validation, take a look at the code of one or two of these plugins, they will give you lots of ideas on how to do what you are doing here in a much better way.

Answer 3

I think your problem you are asking about is that you cannot ONLY do validation of a field in the onchange event because you have two fields that depend upon one another so when one changes, you have to validate both of them. Anytime, you change the password field, you have to also validate the confirm password field and vice versa. And, you will have to handle an empty confirmation field gracefully when the user hasn't gotten there yet.

And, you should validate everything before submitting the form and not submit the form if anything fails validation.