テキストボックスの近くの検証メッセージが期待通りに機能しない

Question

テキストボックスにフォーカスがあるときと空の場合に、テキストボックスの近くに「このフィールドは必須です」と表示されます。そのテキストボックスに既に何かが入力されているときに、そのエラーメッセージを表示したくありません。私はこのコードによってこれを実現しました。しかし、私のここでの問題は、テキストボックスが空で、バックスペースキーやその他の文字以外のキーを入力し続けているときです。「このフィールドは必須です」スパン要素は、どのように私はこれを解決するのですか？あなたはif状態で最初のエラーメッセージを配置する必要があり

HTML

<input data-required="true" type="text" name="foo" /> 
<select data-required="true" > 
    <option value=""></option> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

jqueryの

$("input[data-required='true'],select[data-required='true']").focus(function() { 

    $(this).after('<span class="label_error">This field is required</span>'); 

}).blur(function() { 
    $(this).next('span').remove(); 
}).change(function() { 
    if ($(this).val().length > 0) { 
    $(this).next('span').remove(); 
    } else { 
    $(this).after('<span class="label_error">This field is required</span>'); 
    } 
}).keyup(function() { 
    if ($(this).val().length > 0) { 
    $(this).next('span').remove(); 
    } else { 
    $(this).after('<span class="label_error">This field is required</span>'); 
    } 
}); 

Answer 1

。

if ($(this).val().length <= 0) { 
    $(this).after('<span class="label_error">This field is required</span>'); 
} 

jsFiddle

---

そして、私はあなたがこのバージョンを使用したい、あなたのコードを変更：イベントリスナーのあなたの連鎖削除

jsFiddle

Answer 2

を：.focusを、 .blur、.change、.keyup、テキスト入力の選択とぼかしのために必要な変更のみが必要です。選択または入力からフォーカスが削除されるたびに、これらのすべてがトリガーされ、複数のスパンが作成されます。 $（this）.next（ 'span'）を呼び出すと、要素が実行された後の最初のスパンだけが削除されます。

$(function(){ 
    $("select[data-required='true']").change(function() { 

     req($(this)); 

    }); 
    $("input[data-required='true']").blur(function() { 

     req($(this)); 

    }); 
}); 
function req(item) 
{ 
    //item = $("input[data-required='true']"); 
    item.next('span').remove(); 
    if ($.trim(item.val()).length <= 0) { 
     item.after('<span class="label_error">This field is required</span>'); 
    } 
}