HTMLフォームでは、ユーザーがフォームに記入している間にテキストフィールドを検証できますか？

Question

ユーザーがデータを入力している間にテキストフィールドを検証できますか？ たとえば、ユーザーがフォーム内で1つのチェックボックスを選択し、テキストフィールドにデータを入力せずに次のチェックボックスに移動した場合、フォームは直ちにエラーを生成し、以前に選択されたチェックボックス。つまり、各セクション が正しく実行されない限り（送信ボタンがクリックされたときにフォームの最後に表示されるエラーメッセージ）

ありがとうございます！ここで

Answer 1

あなたのためにこれを行いますプラグインの多くがあります。

jQueryのフォーム検証プラグイン：あなたはそれを手動で行うことを決定している場合This one is good

は、あなたのようなものを使用したいと思う：ここに、あなたがで遊ぶことができるものについて

$('input').on('change', function(){...}); 

Answer 2

はjavascriptのブラー/フォーカスのためのいくつかの例は以下のとおりです。

https://javascript.info/focus-blur

Answer 3

は私が投げたjsfiddleです一緒に。それはフォーカスとぼかしイベントにjQueryを使用します。前の "必須"フィールドのいずれかが空白（またはチェックされていない）になっているかどうかをチェックします。

$(document).ready(function() { 
    function checkCheckbox(jEl) { 
    return jEl.is("input[type='checkbox']:checked"); 
    } 

    function checkTextbox(jEl) { 
    return jEl.is("input[type='text']") && jEl.val() != "" 
    } 

    function validate(el) { 
    el.parent('div') 
     .prevAll('div:has(".required")') 
     .add(el.parent('div')) 
     .addClass('error') 
     .each((i, e) => { 
     jEl = $(e).children('.required'); 
     if (checkCheckbox(jEl) || checkTextbox(jEl)) { 
      $(e).removeClass('error'); 
     } 
     }) 
    } 
    $(".required").on("focus blur", function() { 
    validate($(this)) 
    }); 
});