Использование JQuery, AJAX и PHP для проверки формы HTML

Question

Я использую JQUERY для проверки формы регистрации с клиентской стороны. Я также использую запрос AJAX с файлом PHP, чтобы проверить и убедиться, что письмо является допустимым адресом электронной почты и еще не используется другим пользователем. Все работает отлично, за исключением того, что кажется, что форма отправляется до завершения AJAX. Это общая проблема? Как я могу это предотвратить?

Мой JQuery/AJAX:

<script> 
$(document).ready(function() { 

    $(".form-row-error").hide(); 

    $("#signup").submit(function() { 

     $(".form-row-error").hide(); 
     var error= false; 

     var dataString = $(this).serialize(); 

     var fname= $("#fname").val().trim(); 
     var lname= $("#lname").val().trim(); 
     var email= $("#email").val().trim(); 
     var username= $("#username").val().trim(); 
     var password1= $("#password1").val().trim(); 
     var password2= $("#password2").val().trim();    

     if (fname == 0) { 
      $("#field1").show(); 
      error= true; 
     } 

     if (lname == 0) { 
      $("#field2").show(); 
      error= true; 
     } 

     if (email == 0) { 
      $("#field3").show(); 
      error= true; 
     } 
     else { 
      // Run AJAX email validation and check to see if the email 
is already taken 
      $.ajax({ 
       type: "POST", 
       url: "checkemail.php", 
       data: dataString, 
       success: function(data) { 
        if (data == 'invalid') { 
         alert('invalid email'); 
         error= true; 
        } 
        else if (data == 'taken') { 
         alert('email taken'); 
         error= true; 
        } 
       } 
      }); 
     } 

     if (username == 0) { 
      $("#field4").show(); 
      error= true; 
     } 

     // Checks to see if the username is already in use, if so show the 
field4 secondary error 
     if (username != 0) { 
      // Script to check the username against the database and 
shows the error if applicable 
      // $("#field4-secondary").show(); 
      // error= true; 
     } 

     if (password1 == 0) { 
      $("#field5").show(); 
      error= true; 
     } 

     if (password2 == 0) { 
      $("#field6").show(); 
      error= true; 
     } 

     // Checks and makes sure both password fields have been filled 
     if (password1 != 0 && password2 != 0) { 
      // Checks to see if the passwords match, if not show the 
field5 secondary error and reset the password fields 
      if (password1 != password2) { 
       $("#field5-secondary").show(); 
       $("#password1").val(""); 
       $("#password2").val(""); 
       error= true; 
      } 
     } 

     if (error == true) { 
      return false; 
     } 

    }); 

}); 
</script> 

Некоторые фона:

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

Мой PHP-файл не является проблемой.

Меня не интересует использование JSON, я считаю, что простой текст проще.

Я использую JQuery 1.7.1

Answer 1

Я посмотрел на свой код и обнаружил, что вы не делаете асинхронной ложь в вашем JQuery при проверке электронной почты.

asych:false //make request synchronous 

asynch: инструкция false означает, что выполнение теперь должно завершиться, чтобы контролировать переход к следующему утверждению.

Answer 2

Добавить preventDefault() в ваш submit, чтобы он игнорировал исходное поведение отправки.

Так где ваш код это:

$("#signup").submit(function(event){ 
     event.preventDefault(); // <-- add this 

Теперь, когда по умолчанию представить поведение отключен, вы можете позвонить после формы через AJAX. Поэтому, как только все подтверждено, вы просто просто называем это:

$.post('myurl.php' , $this.serialize() , function(data) { 
     //return data once post (submit) is complete 

    }); 

---

Или вы можете перестроить свой код, и поместить все ваши проверки внутри функции. Как это:

function validateFields() { 
    if (fname==0){return false;} 
    //place all your validation including ajax here 
    return true; 
} 

Затем в форме, просто сделать это:

<form onSubmit="return validateFields()"> 

Таким образом, если ваша функция возвращает false (другими словами, ошибка проверки), то она не будет представлять форму ,

Answer 3

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

Ajax асинхронный, поэтому вы cannot do that.

Вместо этого запустите Ajax, который проверяет, были ли введенные данные в порядке, когда происходит событие change для этого поля. Сохраните результат где-нибудь (возможно, в атрибуте данных для элемента).Удалить, что результаты, как только данные снова изменились (но поставить его обратно, когда приходит новый ответ Ajax)

Вам будет иметь один из следующих ситуаций:

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

Поля, помеченные как действительные (и действительны), так что вы можете вернуть true и отправить нормально.

Поля, отмеченные как действительные (и недействительны), поскольку запрос Ajax все еще находится в полете, в этом случае отправьте обычным способом и пусть ваша проверка на стороне сервера поймает проблему.