2

Jquery Validation プラグインを使用して、送信前にクライアントでフォームを検証しています。

ユーザーがそのフィールド（onblur）に入力したら、サーバーへのajaxを使用して検証したいフォームに特定のフィールドがあります。（基本的にはユーザー名フィールドです。サーバーでユーザー名が利用可能かどうかを確認し、それに応じてメッセージを表示したい）

フォームを検証するために使用しているコードは次のとおりです。

$(document).ready(function()
{
     $("#signupForm").validate({
        submitHandler: ajaxSubmitForm});

});

(ajaxSubmitForm は、フォームを送信する js コードです)

Jquery Validation プラグインを使用して、ユーザー名フィールドが変更されたときに (ajax を使用して) サーバーにその値を送信し、クライアントでそのフィールドが有効であると何らかの方法でマークする結果をサーバーに返すようにして、残りの検証を行うにはどうすればよいですか?動作しますか？

ありがとう

4

2 に答える 2

2

これは、その要素のリモート ルールを使用して行うことができます。次のように適用します。

$('#signupForm').validate({
    rules: {
        username: {
            remote: 'check_username.php' // this is the service page that returns true/false
        }
    }
});

次に、ぼかしの検証をトリガーするには、次を追加します。

$('input[name="username"]').on('blur', function() {
    $('#signupForm').validate().element(this); // this triggers the single element validation
});
于 2012-06-29T13:37:02.493 に答える
1

submitHandler は、フォームが初めて送信されるまで起動しません。ユーザーが初めてフォームに入力するときにユーザー名の一意性を確認したい場合は、別の関数が必要になります。"{taken:false}"以下の例では、指定されたユーザー名がデータベースに存在するかどうかを確認するために SQL クエリを実行し、ユーザー名が一意であるかのような json 文字列を返すページがあると想定しています。

$('#yourForm [name="username"]').on('blur',function(){
    var username = $(this).val();
    $.get('check/username.php',{username:username},function(data) {
        if(data.taken) {
            // highlight the field and indicate that the username is already taken
        }
    },'json');
}

への呼び出しの詳細は、$.getバックエンドの設定方法によって異なります。しかし、一般的に、プロセスは次のようになります。

  • ユーザーがユーザー名を入力します
  • ユーザーがフィールド外でぼかす
  • ユーザー名の一意性を確認するために、サーバーに対して $.get または $.ajax 呼び出しが行われます。
  • サーバーからの応答がユーザー名が一意ではないことを示している場合は、検証を処理し (フィールドを強調表示する、Xアイコンを追加するなど)、次のいずれかを行います。
    • ユーザー名が一意になるまでフォームの送信を禁止する、または
    • フォームを送信して、ユーザー名が重複している場合にエラーを返す

アップデート

検証プラグイン用の新しいルールを作成する場合は、次のようにすることができます。

function isUsernameUnique(username,field) {
  var unique = false;
  $.ajax({
    url: 'path/to/usernameCheck/',
    data: { username: username },
    async: false,
    success: function(data) { unique = data.unique; }
  });
  return unique;
}

$.validator.addMethod(
    'uniqueUsername',
    isUsernameUnique,
    'That username is already in use. Please choose a unique username.'
);

次に、フォームの検証関数で:

$('#yourForm').validate({
  ...
  rules: {
    username: { uniqueUsername: true }
    ...
  }
  ...
});

そして、blurユーザー名フィールドの別の関数:

$('[name="username"]').on('blur',function(){
  var unique = isUsernameUnique($(this).val(),$(this));
  if(!unique) {
    // handle error
  }
});

これにより、送信前の検証と検証プラグインの両方に同じ関数を再利用できます。ただし、ここには 2 つの問題があります。

1 - 最初の送信後、$.fn.validate() はユーザー名フィールドを積極的に検証します。つまり、ユーザー名フィールドでのblurイベントは不要になります。おそらく、最初の送信後に無効にして、不要な ajax 呼び出しを防ぐことができます

blur2 -イベント ハンドラーで独自のエラー処理を行う必要があるため、100% DRY ではありません。

于 2012-06-27T14:21:23.130 に答える