11

プロジェクトで Jquery Validation プラグインを使用しています。

デフォルトでは、プラグインは送信ボタンがクリックされたときに入力を検証します。ユーザーの邪魔にならないように、動作は「怠惰」です。エラーが見つかった場合、検証は「イーガー」になり、ユーザーが問題のあるエントリを修正すると、入力が検証されます。

オプションを介して最初の「怠惰な」動作をオーバーライドする方法はありますか? ドキュメントに解決策が見つかりません。

例：

このデモを見ると、ユーザーが送信をクリックしたときに検証に失敗する空のテキスト ボックスを残したままフォームをナビゲートできることがわかります。ユーザーが最初に電子メール テキスト ボックスに無効な電子メール アドレスを入力すると、送信ボタンがクリックされるまで強調表示されません。その後、入力は各キー押下およびぼかしイベントで検証されます。それは私が最初からアクティブにしたいものです。

プラグイン作成者の設計上の選択は理解していますが、別の動作が必要です。

4

4 に答える 4

15

この質問に関するガイダンスを提供してくれた chaos に感謝します。

jquery 検証プラグインで熱心な検証を有効にするには、検証関数に次のオプションを追加します。

 $('#myform').validate({
    onfocusout: function(element) {
        $(element).valid();
    }
});
于 2009-06-01T18:18:16.880 に答える
6

focusout実際、私が取得するデフォルトの動作はとイベントの検証でありkeyup、これはプラグイン コードでデフォルトとして表示されます。送信時にのみ検証を取得するには、プラグイン構成でそれらを無効にする必要があります。おそらく、コードの一部を投稿する必要があります...状況が完全に明確ではないと思います。

于 2009-06-01T12:23:58.943 に答える
2

を使用してデフォルト設定でこれを行うことができるというロバートの回答に追加したかったsetDefaults()ので、検証メソッドの実際のインスタンスを利用することに依存しません（通常、目立たない検証では公開されません）。

メソッドonfocusoutを呼び出して、ぼかした要素を常に評価する関数でプロパティをオーバーライドするだけです。valid()

// enable eager evaluation
$.validator.setDefaults({
    onfocusout: function (element) {
        $(element).valid();
    }
})

Demo With Eager Evaluation :
(タブアウト後に必須と表示されます)

// enable eager evaluation
$.validator.setDefaults({
  onfocusout: function (element) {
    $(element).valid();
  }
});

$("form").validate();
input.error {
  border-color: red
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>

<form >
  <input type="text" name="Name" required /><br/>
  <input type="text" name="Email" required /><br/>
  <input type="submit" value="Submit"/>
</form>

通常のデモ
(送信するまで表示されません)

$("form").validate();
input.error {
  border-color: red
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>

<form >
  <input type="text" name="Name" required /><br/>
  <input type="text" name="Email" required /><br/>
  <input type="submit" value="Submit"/>
</form>

于 2015-01-21T03:20:14.760 に答える