проверка уникальности электронного письма перед отправкой формы регистрации

#javascript #form-submit #email-validation

#javascript #форма-отправить #электронная почта-проверка

Вопрос:

У меня возникли проблемы с проверкой уникальности электронной почты на стороне клиента перед отправкой формы регистрации на стороне сервера.

 submitButton.onclick = function(){
    var email = $('input[name = "email"]').val();
    var checkEmail;
    $.ajax({
        url: 'serverScripts/settings/checkEmailAvailability.php',
        data: {email: email},
        async: false,
        success: function(text){
            checkEmail = text;//Return "occupied" or "freeToUse"
        }
    });
    if(checkEmail == 'occupied'){
        return false;
    }
}
  

Комментарии:

1. В чем ваша проблема? то есть, что не работает

2. В чем конкретно проблема? Это не работает или ваш javascript выдает ошибку?

3. Синхронный XHR предоставляет ужасный пользовательский интерфейс.

Ответ №1:

Ваш скрипт на: serverScripts/settings/checkEmailAvailability.php

ожидается переменная с именем «email»

затем ваш php-скрипт должен запросить базу данных и проверить, доступна она или нет, и вернуть «занято», если она есть в базе данных.

в противном случае это допустимый адрес электронной почты для использования.

Ответ №2:

Я подозреваю, что это ваше именование переменных. Смотрите этот раздел:

 $.ajax({
    url: 'serverScripts/settings/checkEmailAvailability.php',
    data: {email: email},
    async: false,
    success: function(text){
        checkEmail = text;//Return "occupied" or "freeToUse"
    }
});
  

Вероятно, это должно быть

 data: {'email': email},
  

обратите внимание на кавычки. В нынешнем виде вы создаете элемент данных

 {joe.blow@email.com, joe.blow@email.com}
  

хотя это должно быть

 {email: joe.blow@email.com}
  

Комментарии:

1. Неправильно! Это должно проверяться на стороне клиента

2. Что это вообще значит? Здесь действительно помогло бы немного больше информации.

Ответ №3:

Я решил сделать этот скрипт правильно:

 <!DOCTYPE html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<form action="javascript:alert('it went though pipes')" method="get">
<input type="email" name="email">
<input type="submit" name="submitButton" id="submitButton">
</form>
<script>
$('form').submit(function(){
    var email = $('input[name = "email"]').val();
    var checkEmail = $.ajax({
        url: 'serverScripts/settings/checkEmailAvailability.php',
        data: {email: email},
        async: false,
        success: function(data) {
            result = data;
        }
    });
    if(result.search('occupied')!=-1){
        alert("You've done something WRONG");
        return false;
    }
})
</script>
  

Теперь, возможно, некоторое объяснение. Он использует jQuery. <form action="..."> Это просто для развлечения, замените его реальным адресом и не стесняйтесь вставлять <form> на реальную страницу. Итак, что было не так? text зарезервирован в JS, вы не можете его использовать, поэтому я изменил его на data . Кроме того, я решил использовать .search при поиске «занято» и немного изменить метод, который вы используете при отправке: P.

Я создал страницу быстрого тестирования, если вам интересно: (принимается только pass@me.com если вы хотите знать).

http://glitchmr.pl/nuda/test.html

(кроме того, $.ajax специфичен для jQuery, если вы им еще не пользуетесь)

Комментарии:

1. Внутренние ошибки сервера не имеют никакого отношения к этому коду. Это ошибка, которая произошла во время обработки скрипта таким инструментом, как PHP. Проблема, вероятно, в вашем PHP-скрипте. Вы можете вставить это или что-то еще?

2. Можете ли вы попробовать применить другое действие в форме. Нравится signUp.php ?

3. Конечно. <form action="..."> Это просто для развлечения, замените его реальным адресом и не стесняйтесь вставлять <form> на реальную страницу. Другими словами, вы можете ввести там parse.php или что-нибудь подобное этому. Я использовал javascript: для проверки, все ли в порядке, фактически не передавая это на сервер.

4. Ок, нашел, в чем была проблема. У меня был заголовок (Location: something), который вызывал ошибку 500