HTMLフォーム追加要件画像

Question

入力フィールドの後ろに画像を追加しようとしています。フォーム要件が満たされると、この画像は消えます。私はcssと入力を使用してフィールド自体に画像を追加する方法を見つけました：必須：無効ですが、このプロジェクトの要件はhtml imgタグでフィールド外にすることです。

私は今のところ（スニペット）を持つコード

<label for="FIRST">Name: 
<input required type="text" name="FIRST" placeholder="First" size="35" id="FIRST"><span id = "sadFace"><img src="sad.png" id="sad"></span></label> 
<label for="LAST"></label> 

は、これは私がそれをしたい場所に画像を置きますが、私はフィールドが正しく入力されていたら、それが消えるように方法がわかりません。

私はCSSに追加してみました： ＃sad.required {/ *いくつかのデザイン要素* /}

が、これはすべての

Answer 1

"：valid"疑似クラスを使用してタスクを完了する必要があります。これはあなたの状況に適したコードです：

<!-- CSS --> 
    <style> 
     /* select the #sadFace preceded by a valid input */ 
     input:valid ~ #sadFace { 
      display: none; 
     } 
    </style> 

    <!-- html --> 
    <label for="FIRST"> 
     Name: 
     <input required type="text" name="FIRST" placeholder="First" size="35" id="FIRST"> 
     <span id = "sadFace"> 
      <img src="img/imgA.png" id="sad"> 
     </span> 
    </label> 

Answer 2

あなたが使用しているセレクタ（#sad.required）で画像を変更しませんでしたid='sad'およびclass='required'を持つ要素を指します。私はあなたが必要とされるすべてのinputの子供imgの要素を参照することを意味すると仮定しています。その場合は、セレクタとしてinput[required] #sadを使用する必要があります。

必須属性をfalseに設定しても、値が指定されておらず、一致する属性が存在する必要があるため、上記セレクタからimgを除外しないことに注意してください。

Answer 3

$（ '＃パス'）keyUpイベント（関数（）{

if($(this).val()!='') 
     $('#show').hide() //or may be with an effect 
    else 
     $('#show').show() 

}）。