web-dev-qa-db-ja.com

HTML5フォームに有効なイベントリスナー

  1. HTML5の新機能として、リスナーを追加できる「無効な」イベントがあります。

    document.addEventListener('invalid', function(e){
   var element = $(e.target);
   element.addClass("invalid");
   element.parent().addClass("invalid");
}, true);

    このイベントは、フォームを送信するときにのみ機能することに注意してください...入力のスタイルを設定するとinput:invalid { background: red }、スタイルは、ユーザーが入力を開始し、入力が無効になったときに適用されます。そのイベントは送信時にのみ発生しますか？ドキュメントではなく入力自体にリスナーを追加しようとしましたが、機能しませんでした。

  2. 入力の親にスタイルを適用するためにリスナーを追加します...これで、ユーザーがスタイルを修正すると、再び有効になります...「有効な」イベントがないことがわかっているので、どうすればそれを実現できますか？

さて、ここにフィドルがあります-> http://jsfiddle.net/Osoascam/ceArQ/7/ 無効なリスナーは送信時にのみ起動されるようです...私はただあるかどうか知りたかっただけですフォーカスの場合と同じようにハンドラーを追加する方法。あなたがタイプするならそれを見てください

前もって感謝します、

オスカー

javascriptformshtmlvalidationaddeventlistener
18
Óscar

問題を解決するには、：invalid疑似セレクターと入力または変更イベントを使用する必要があります。

$(document).bind('change', function(e){
    if( $(e.target).is(':invalid') ){
        $(e.target).parent().addClass('invalid');
    } else {
        $(e.target).parent().removeClass('invalid');
    }
});

これが簡単なフィドルです http://jsfiddle.net/trixta/YndYx/ 。

エラークラスをできるだけ早く削除したい場合は、変更時にエラークラスを追加し、入力イベントで削除する必要があります（注：入力イベントは、貼り付けなどでもトリガーされるため、ここで提案されているキーアップよりもはるかに優れています。 、ただし、textareaではなく、入力要素でのみ機能します。）

そして、ここに入力イベントと変更イベントを組み合わせて使用​​するフィドルがあります： http://jsfiddle.net/trixta/jkQEX/

そして、このクロスブラウザが必要な場合は、 webshims lib を使用してポリフィルすることができます。 xブラウザの例を次に示します。 http://jsfiddle.net/trixta/RN8PA/

15
alexander farkas

これらのクラスはフォームの送信時に常に追加されるため、検証する前にクラスを削除してください。

_$('#myForm').submit(function(){
    $('.invalid', this).removeClass('invalid'); // Remove all invalid classes
    $(this).removeClass('invalid');             // If the parent = form.
    // Normal validation procedure.
});
_

期待される結果：

  1. ユーザーがsubmitを開始します
  2. onsubmitがトリガーされます>フォーム内のすべてのinvalidクラス名が削除されます。
  3. invalidイベントがトリガーされ、必要に応じてinvalidクラスが追加されます

更新

フィドルに追加のブロックを追加しました。更新されたフィドルを参照してください： http://jsfiddle.net/ceArQ/10/。 checkValidity() メソッドと_validity.valid_プロパティを実装しました。これで、入力が無効な場合にクラスが自動的に追加されます。

_document.addEventListener('keyup', function(e){
    var input = e.target;
    if (!$.nodeName(input, 'input')) return;
    input.checkValidity();
    var element = $(input).parent();
    if(input.validity.valid) {
        element.removeClass('invalid');
        element.parent().removeClass('invalid');
    } else { //Remove the lines below if you don't want to automatically add
             // classes when they're invalid.
        element.addClass('invalid');
        element.parent().removeClass('invalid');
    }
});
_

キーアップ時に、入力要素の有効性がチェックされます。有効な場合、invalidクラスはその親から削除されます。

3
Rob W

_:valid_を使用して、フィールドが有効かどうかを示すインジケーターを表示してみましたか。無効なフォームがある場合は、デフォルトのスタイルを維持するだけです。

次に、送信ハンドラーでform.checkValidity()を呼び出しますか？ （ブラウザは、どのフォーム要素が無効であるかをエンドユーザーに通知する必要があります）。

1
Raynos

検証ロジックをfocusおよびblurイベントにバインドしたり、keyupイベントへの応答性をさらに高めたりすることができます。

$('input').keyup(function() {
    if(isValid(this)) {
        $(this).removeClass('invalid').parent().removeClass('invalid');
        $(this).addClass('valid').parent().addClass('invalid');
    }
    else {
        $(this).removeClass('valid').parent().removeClass('valid');
        $(this).addClass('invalid').parent().addClass('invalid');
    }
});
1
mAu