0

( Placeholder Hiddenからの質問に従ってください)

フォームがロードされたときに既存のデータを検証するようにしたいと思います。私はそれを起こさせることができないようです

  • 私は自分のコントロールの jQuery.each と focus() と blur() を呼び出しますが、これよりも良い方法はありますか? ctrl.checkValidity() を呼び出そうとしましたが、まだ定義されていませんでした。それがあったとき、それはまだコントロールをマークしませんでした。
  • focus と blur() が発生している間、タイミングの問題もあるようですが、UI は更新されません。これは $.webshims.ready イベントで発生しますが、Webshims がまだ完全に読み込まれていないかのようです。
  • $('#form').submit() も呼び出してみましたが、期待どおりにイベントが発生しません。それを実現できる唯一の方法は、input type='submit' を含めることでした。送信ボタンをクリックするようなフォーム検証を実際に行うにはどうすればよいですか?

問題を示すjsFiddleを次に示します。フォームが読み込まれると、無効な電子メールがそのようにマークされるようにします。追加ボタンをクリックするとマークされますが、最初にロードされたときはマークされません。なんで？

  • コントロールのフォーカスとぼかしにより、マークが付けられます。

  • ただし、[追加] をクリックすることもできます (ロードされたときに実行されたのと同じメソッドが実行されます)。2回目には機能するのに、最初にロードしたときは機能しないのはなぜですか?

    updateValidation : function ()  {
this.$el.find('[placeholder]').each(function (index, ctrl) {  
    var $ctrl = $(ctrl);
    if( $ctrl.val() !== "" && (ctrl.checkValidity && !ctrl.checkValidity()) ) {
        // alert('Do validity check!');
        $ctrl.focus();
        $ctrl.blur();
    }
});
}

これはFF 17.0.5で見られます。IE9 では問題がさらに悪化し、フィールドがエラーで表示される前に ADD を 2 ～ 3 回クリックする必要がある場合があります。ただし、「MIME タイプの不一致が原因で」気に入った js ファイルの一部でエラーが発生します。

4

1 に答える 1

0

これは、CSS4 :user-error の「シム」であり、スクリプトからトリガーされるべきではない .user-error クラスを再利用しようとしているという事実に関係しています。ユーザー エラー スクリプトは、onload の後、またはユーザーが無効な from とやり取りしたように見えるとすぐに読み込まれます。

私の観点からは、ユーザーエラーを使用せず、代わりに独自のクラスを作成するべきです。「:invalid」セレクターを使用して、有効性を簡単に確認できます。

$(this)[ $(this).is(':invalid') ? 'addClass' : 'removeClass']('invalid-value');

同様のコードで関数を作成し、それらを変更、入力などのイベントにバインドし、開始時に呼び出すだけです。

それでもユーザーエラーを使用したい場合は、次のことを行うことができますが、お勧めしません:

$.webshims.polyfill('forms');
//force webshims to load form-validation module as soon as possible
$.webshims.loader.loadList(['form-validation']);
//wait until form-validation is loaded
$.webshims.ready('DOM form-validation', function(){
    $('input:invalid')
        .filter(function(){
            return !!$(this).val();
        })
        .trigger('refreshvalidityui')
    ;
});
于 2013-05-15T14:37:49.937 に答える