web-dev-qa-db-ja.com

jQuery検証プラグインの使用：onfocusout、onkeyupが本番サイトで期待どおりに機能しない

私は jQuery Validate plugin v.1.9.0を使用していますが、非常にうまく動作します。しかし、私はこの問題に直面しています。ユーザーがフォームを送信すると、エラーがある場合、エラーメッセージが正しく表示されます。問題は、ユーザーがそのエラーを修正するためのアクションを実行しても、メッセージが更新されないことです。例えば。フィールドが必要な場合、メッセージを最初に取得したときにユーザーが入力を開始すると、そのメッセージは表示されなくなります。

ドキュメントでは、onfocusout＆onkeyupがこの目的で使用されていると記載されています＆デフォルトでは、これらはtrueに設定されています。おかしいのは、ローカルワークステーションで動作しているように見えますが、コードを本番サイトにアップロードすると（サイレントで）失敗します。どういうわけか王様を台無しにしていたと思ったので、jsfiddleを起動し、関連するコードを入れて確認しましたそこにも発生した場合。

それがそこでも起こるのを見て、私は驚きました。だから私の質問は、なぜそれが私のローカルマシンで動作するのに本番サイトでは動作しないのですか？

追伸 http://jsfiddle.net/tankchintan/cge44/5/ の自己完結型の例

[〜＃〜]更新[〜＃〜]

問題を再現するには、次のようにします-

  1. Jsfiddleページに移動します。
  2. フィールドに入力せずにフォームを送信します。
  3. 各フィールドの横にエラーメッセージが表示されます。
  4. 次に、いずれかのフィールドに入力を開始します。
  5. ルールが満たされていても、エラーメッセージが消えないことがわかります。私のローカルマシンでは、フィールドに何かを入力すると、エラーメッセージは表示されなくなります。
javascriptjqueryjquery-pluginsjquery-validatevalidation
18
Chantz

この問題は、JQuery Webサイトのいくつかの例にも存在します。

この問題は、入力要素に型がない場合に発生することがわかりました。指定されていない場合、Webブラウザーはタイプが「テキスト」であると想定しますが、jquery.validateには問題があります。入力要素は次のようになります。

<input id="cname" name="name" type="text" class="required" minlength="2" />
16
nuander

代わりにこれを使用してください！

onkeyup: function(element) { $(element).valid(); },
onfocusout: function(element) { $(element).valid(); },
31
user1893029

どうやら、jQueryライブラリが新しすぎる場合、これは機能しません。私は同じことを経験していました、jquery v1.7.2からv1.3.2にロールバックして問題を修正しました。

http://jquery.bassistance.de/validate/demo/ のサンプルページでは1.3.2を使用していますが、この破損が発生したjqueryの特定のバージョンはわかりません。

2
Sam Barnum

次は私のために働きます：

$(document).ready(function () {
        $("#myFormElement").submit(function (event) {
            var validator = $.data($('form')[0], 'validator');
            validator.settings.onfocusout = function (element) { $(element).valid(); };
            validator.settings.onkeyup = function (element) { $(element).valid(); };
        });

        var validator = $.data($('form')[0], 'validator');
        validator.settings.onfocusout = false;
        validator.settings.onkeyup = false;
    });

これにより、初期のonkeyup検証が無効になります。その後、ユーザーが[送信]をクリックすると、検証が再度有効になり、フィールドが有効になるとすぐにフィードバックが提供されます。

これらのプロパティが最初はブール値で、送信イベントでコールバックされる理由がわかりません。 submitイベントでプロパティをtrueに設定してメソッドを見つけただけで、検証ライブラリで例外が発生しました（関数の呼び出しを試みていました）。

2
mixja

デフォルトの動作は、フィールドが検証されたときにのみそのメッセージを非表示にすることだと思います。 「[email protected]」と入力すると、「有効なメールアドレスを入力してください」が消えます。

デモを見る： http://jquery.bassistance.de/validate/demo/

私はあなたがこれに似た何かをしようとしていると思うかもしれません： jquery validate：focusCleanup：true and focusInvalid：false do not work期待どおりに動作しません

0
agtb