数秒後にエラークラスが消えるようにする - （基礎レール）

Question

基礎レールを使用してフォームを作成し、<small class="error">Invalid entry</small>を使用してフィールドの下にエラーを表示しました。例えば

は、divの内側：

<%= text_field_tag "email", "", placeholder: "Email", required: true, type: "email", pattern: "email" %> 
<small class="error error-style">Invalid</small> 

エラースタイルは、私は、CSSのスタイリングを行うために使用しているクラスです。

ユーザーがフォームの記入を開始し、無効なメール（例： @を含まない場合、エラーが表示されます。しかしそれはそこに残っている。私はそれが約5秒後に、ユーザーがフォームに記入しないことを決めたときに「隠れた」状態になるようにしたいが、まだそのページをブラウズしている。

setTimeoutとfadeout（）を使用して試行しました。

助けが必要ですか？

Answer 1

は、フロントエンドの検証中にエラー要素を表示して削除するには

$(function() { 
    setTimeout(function(){ 
    $('.error').slideUp(3000); 
    }, 3500); 
}); 

Answer 2

、これを試してみてください、あなたは「変更」イベントを使用することもできます。最初に、error要素にhideというクラスを与え、その上には何も表示しません。そして、changeイベントでそれを変更することができます。以下の例では、addClassとremoveClassを使用していますが、toggleClassも使用できます。

<%= text_field_tag "email", "", placeholder: "Email", required: true, type: "email", pattern: "email", id: "email_input" %> 
<small class="error error-style hide">Invalid</small> 

javascriptの

function email_is_valid(email) { 
    var regex = /[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}/; 
    return regex.test(email); 
} 

$('#email-input').on('change', function(event) { 
    $(this).find('.error').addClass('hide'); 
    var email = $(this).val(); 

    if (email_is_valid(email)){ 
    $(this).find('.error').removeClass('hide'); 
    } 
}); 

CSS

.hide{ 
    display: none; 
} 

私はあなたの完全なマークアップを知らないように簡単にターゲティングするための入力要素にIDを追加しました。その要素をどのようにターゲットにするかを変更することができます。また、私は上記正規表現をテストしていない、適切なものを見つけることができるオンラインリソースがたくさんあります。