1

これはばかげているかもしれないと思いますが、私は何時間もそれに固執しています。

メールアドレスがすでにデータベースにあるかどうかを判断するためにajaxを使用したjquery検証を使用した単純なフォームがあります。よく働く。メールアドレスが見つかった場合は重複を報告し、見つからなかった場合はサイレントです。

しかし、新しいことがわかっている電子メールを入力し、フォームの残りの部分に入力して[送信]を押すと、フォームの送信が妨げられ、電子メールフィールドにフォーカスが設定されます。

jQueryは次のとおりです。

$(document).ready(function(){
var email;
var name;
var passwd;
var passwd_repeat;

     //form validation rules
     $("#regForm1").validate({
         rules: {
            name: {
                required: true,
                minlength: 3,
            },
            passwd: {
                required: true,
                minlength: 8,
            },
            passwd_repeat: {
                required: true,
                equalTo: passwd,
                minlength: 8
            }
         },
         messages:
         {
             name: "Please enter your name.",
             passwd: "Please enter a password.",
             passwd_repeat: "Passwords must match."
         }
     });

    $.validator.addMethod("validateUserEmail", function(value, element) {
        var inputElem = $('#regForm1 :input[name="email"]'),
        data = { "email=" : inputElem.val() },
        eReport = ''; //error report*/
        var dataString = 'email='+ inputElem.val();
        $.ajax( {
            type: "POST",
            url: '/checkdups.php',
            data: dataString,
            success: function(html) {
                if (html !== 'true') {
                  $('#email').after('<label class="error" for="email">error - '+inputElem.val()+' already in use. Please <a href="http://tester4.com/staff/auth/login">Log in</a> with '+inputElem.val()+'.</label>');
                  return false;
                }
                else {
                    return true;
                }
            },
            error: function(xhr, textStatus, errorThrown)
            {
                alert('ajax loading error... ... '+url + query);
                return false;
            }
        });
    }, 
'');

$(':input[name="email"]').rules("add", { "validateUserEmail" : true} );

}）;

.remoteを使用する代わりにaddMethodを使用してルールを追加しています。これは、最初から動作させることができなかったため（つまり、ページを更新しないと一連の重複を拒否しないため）、これは次のように提案されました。回避策。追加したメソッドをコメントアウトすると、フォームを送信できますが、もちろん重複をチェックしません。

とにかく、どんな洞察も大歓迎です。

ジョン

4

2 に答える 2

2

本当に使用する必要がありますremote。なぜ期待どおりに機能しなかったのかわかりません。リモートは間違いなく何度も呼び出されます。デフォルトで機能する方法は、送信を押すまでリモートページを呼び出さないことです。その後、リモートコールが不良であると言った場合、その後のキーストロークごとに新しいリモートコールが生成されます。

これは、構築できる簡単な実例です。3つの変更を加えるまで、常にfalseを返すように設定しました。したがって、次の手順に従うことができるはずです。

  1. john@rand.comと入力し、[送信]をクリックします。無効としてマークされていることに注意してください。
  2. mを削除（無効）
  3. o（無効）を削除します
  4. cを削除します（無効ですが、現在有効な電子メールアドレスではないため）
  5. タイプcom（固定）
  6. 提出（作品）

そのフィドルのキーコードはルールオブジェクトにあります（この例では、応答はグローバルカウンターです）。

rules: {
    email: {
        email: true, 
        remote: {
            url: '/echo/json/',
            data: {
                json: function(){
                    response++;
                    return (response > 3)?'true':'false';
                }
            },
            complete: function(data){
                $('#log').append('remote triggered<br>');
            },
            type: 'post'
        },
        required: true
    }
}
于 2013-03-25T17:48:09.677 に答える
0

@ライリー、お返事ありがとうございます。リモートで再試行しましたが、正常に機能しました。Firefoxのキャッシュに問題があったと思います。

私のはあなたのように見えるので、ありがとう！

于 2013-03-25T21:32:44.803 に答える