Как создать способ подтверждения пароля и подтверждения по электронной почте?

Question

Здравствуйте, я создал полностью рабочую форму с помощью ajax, jquery, но столкнулся с небольшой проблемой.

Вот мой код ...

HTML

<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>

JAVASCRIPT / JQUERY

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);
} 

PHP

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();
}

Когда пользователь вводит пароль, которыйне имеет необходимой длины, все работает хорошо.Но если пользователь затем продолжит подтверждать пароль тем же значением, что и предыдущий пароль, он получит пароли, соответствующие ожидаемым.Но поскольку первое неверно, они возвращаются и меняют первое, а второе все еще говорит, что это совпадение, как я могу заставить его проверить это снова, если значение идентификатора пароля изменилось ??

То же самое с электронной почтой, если это имеет смысл ??

Спасибо за ваше время ...

Answer 1

не будет использовать проверку jquery для решения вашей проблемы, такой плагин сделает все это за вас, даже если столкнутся 2 проверки ...

Подробнее об этом здесь: http://docs.jquery.com/Plugins/Validation

и посмотрите демо здесь: http://jquery.bassistance.de/validate/demo/

Answer 2

Я думаю, что ваша проблема, о которой вы спрашиваете, заключается в том, что вы не можете выполнить ТОЛЬКО проверку поля в событии onchange, потому что у вас есть два поля, которые зависят друг от друга, поэтому при изменении одного из них вы должны проверить оба. В любое время, когда вы меняете поле пароля, вы также должны подтвердить поле подтверждения пароля и наоборот. И вам придется изящно обрабатывать пустое поле подтверждения, когда пользователь еще не попал туда.

И вы должны проверить все перед отправкой формы и не отправлять форму, если что-то не проходит проверку.

Answer 3

Сделайте это в вашем коде сверху:

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);
}

Но я бы также рекомендовал использовать один из уже упомянутых плагинов для проверки формы jQuery. И даже если вы все еще хотите написать свою собственную проверку, взгляните на код одного или двух из этих плагинов, они дадут вам много идей о том, как сделать то, что вы делаете здесь, гораздо лучше.