1

I am validating a form on a registration page, everything works properly except the email validation is a bit hit and miss.

It works fine if I just validate it to make sure it's an actual email address, but when I try to add a check to see if its in use as well I run in to problems.

The validation itself works fine, but the form won't submit once its validated and not in use.

This works, and the form submits:

if(filter.test(a)){
        email.removeClass("field_error");
        emailInfo.text("");
        emailInfo.removeClass("error");
        return true;
    }

This works, but the form does not submit:

if(filter.test(a)){
        $.post('php/availability.php',{email: $('#email').val()}, function(emaildata){
            if(emaildata.exists){
                email.addClass("field_error");
                emailInfo.text("(Email address in use)");
                emailInfo.addClass("error");
            } else {
                email.removeClass("field_error");
                emailInfo.text("");
                emailInfo.removeClass("error");
                return true;
            }
        }, 'JSON');
    }

I'm stumped.

4

1 に答える 1

1

この問題は、AJAX 呼び出し (最初の「A」) の非同期性に関係しています。

最初の例では、ブロックに陥り、ifすぐに を返しtrueます。これにより、フォームの送信が許可されると想定しています。

ただし、2 番目の例では、ブロックに陥りますifが、Web リソース ( ) を非同期的に呼び出しますavailability.php。コードは AJAX 呼び出し ($.post()呼び出し) を行い、すぐにifブロックの最後に到達します。 True返されないため、フォームは送信されません。

あなたがする必要があるのは次のことです：

  • exists===falseロジックを別の関数に移動します。
  • ブロックでif、電子メールが有効な場合は、関数を呼び出します。
  • あなたの関数はフォームを見つけ（jQueryで言う）、それを送信します

したがって、修正されたコードは次のようになります。

if(filter.test(a)){
        $.post('php/availability.php',{email: $('#email').val()}, function(emaildata){
            if(emaildata.exists){
                email.addClass("field_error");
                emailInfo.text("(Email address in use)");
                emailInfo.addClass("error");
            } else {
                submitForm(email, emailInfo);
            }
        }, 'JSON');
    }

そして、submitForm()次のようなことをします：

function submitForm(email, emailInfo){
  email.removeClass("field_error");
  emailInfo.text("");
  emailInfo.removeClass("error");
  $('#theForm').submit();
}

次に、フォームの送信が表示されるはずです。

お役に立てれば！

于 2013-04-17T15:57:29.943 に答える