web-dev-qa-db-ja.com

jQuery validateで無効なフィールドにフォーカスする方法は？

focusInvalid オプションがあり、デフォルトではtrueです。ただし、フォームの送信が発生した場合にのみ機能します。 valid メソッドでフォームを検証した場合、機能しません。質問は、validが使用されているときに無効なフィールドにフォーカスする方法です。

このデモ を参照して、違いを確認してください。そこのボタンを押すだけです。

jqueryjquery-validate
47
LA_

まず、バリデーターを変数に保存して、クリックハンドラーで使用できるようにする必要があります。

var validator = $("#test-form").validate({ /* settings */ });

次に、検証ハンドラーで、focusInvalid変数からvalidator関数を手動で呼び出すことができます。

  $("#validate").click(function() {
        if ($("#test-form").valid()) 
              alert("Valid!");
        else
              validator.focusInvalid();

        return false;
  });

例

50
Rory McCrossan

invalidHandlerを使用すると、失敗した最初の要素にフォーカスを設定できます。

$("#form").validate({
    onfocusout: false,
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {                    
            validator.errorList[0].element.focus();
        }
    } 
});
55
James Johnson