0

データベースから重複したメールをチェックしています。最初に有効なメールをチェックし、次にメールの長さをチェックしてから、ajaxを使用してデータベースからメールをチェックしました。そのため、true を返すか false を返すことは ajax コードでは機能しません。他の検証は問題ありませんが、重複した電子メールのチェックは機能しません。ajaxレスポンスもOK。
ここに私のjsファイル-

$(document).ready(function(){

var form = $("#form");
var registeremail = $("#registeremail");
var emailInfo = $("#emailInfo");

registeremail.blur(validateEmail);
registeremail.keyup(validateEmail);


form.submit(function(){
    if(  validateEmail() )
        return true;
    else
        return false;

});


function validateEmail(){
    //testing regular expression
    var a = $("#registeremail").val();
    var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
    //if it's valid email

    if(filter.test(a)){
        registeremail.removeClass("error");
         emailInfo.text("");
        emailInfo.removeClass("error");
        if(registeremail.val().length < 8){
            registeremail.addClass("error");
            emailInfo.text("Min 8 letters required.");
            emailInfo.addClass("error");
            return false;
        }
        else if(registeremail.val().length > 60){
            registeremail.addClass("error");
            emailInfo.text("Max 60 letters required.");
            emailInfo.addClass("error");
            return false;
        }
        else
            { 
            $.ajax({
                  url: "home/CheckEmail",
                  data: {
                      email: a
                  },
                  success: function(ret)
                  {
                    if(ret=='1')
                    {
                        registeremail.addClass("error");
                        emailInfo.text("Email already exist.");
                        emailInfo.addClass("error");
                        return false;
                    }
                    else if(ret != '1')
                    {
                          registeremail.removeClass("error");
                          emailInfo.text("");
                          emailInfo.removeClass("error");

                          //document.forms["form"].submit();
                         return true; 
                    }
                  }
            });
            }
    }
    //if it's NOT valid
    else{
        registeremail.addClass("error");
        emailInfo.text("Valid e-mail please");
        emailInfo.addClass("error");
        return false;
    }
}

});

4

1 に答える 1

1

デフォルトでは、jQuery の ajax 呼び出しは非同期で実行されます。

そのため、ajax 呼び出しを行うと、成功またはエラーのコールバックはすぐには実行されません。

上記のコードを機能させるには、「async : false」を ajax 呼び出しパラメーターに追加します。

ただし、同期 ajax 呼び出しを行うと、完了するまで UI がフリーズします。バックエンドの API 呼び出しが完了するまでに時間がかかる場合、これは障害になります。

理想的な方法は

  1. 処理中/読み込み中のアイコンを表示
  2. AJAX 呼び出しを送信する
  3. 応答後、処理中・読み込み中アイコンを非表示
  4. 応答に基づいて、エラー/成功メッセージを表示します。
于 2013-03-08T06:46:28.377 に答える