テキストボックス内にフォントの素晴らしいアイコンを表示

Question

私はフォーカスにテキストボックスを持っています、私はチェックしていますmail_idがすでに登録されているかどうかは、登録されていない場合は、テキストボックスに正しいシンボル（正しいフォント素晴らしい記号） （右側）、そうでなければ十字記号を表示したい。

私は私のコードは、私はR午前here ある

$(document).on('focusout', '#mailid', function (event) { 
    $('#mailid').addClass('availablle'); 
    }); 

のjQuery

Htmlの

に

<div class="col-md-6 col-lg-6"> 
    <input type="text" name="user.mailId" id="mailid" placeholder="Mail Id" class="form-control rgn"/> 
    </div> 

を以下のCSS

.availablle { 
    position:relative; 
    } 
    .available:before { 
    content: "&#xf00c"; 
    font-family: FontAwesome; 
    left:-5px; 
    position:absolute; 
    top:0; 
    color:green; 
    } 

を試してみましたefering this

Answer 1

使用できません：before、：after for input。新しいものを作り、「利用可能」クラスを追加してください。

Answer 2

ここでは、アプリケーションの使用方法について説明します。 Js fiddle showing what can be in use for you

希望：）

Answer 3

私は何を探していることは、すでに（私はあなたがあなたのjsfiddleオフに基づいて、これを使用しているという仮定を作っています）

ブートストラップに組み込まれており、ここで利用可能であると考えている。http://getbootstrap.com/css/#forms-control-validation

このオプションは使用していますあなたがfont-awesomeアイコンを使用したい場合、私は以下のオプションを作成しました。アイコンを切り替えるだけです。

http://codepen.io/Mkapin/pen/XpKbLM?editors=1100

glyphiconのglyphicon-OK - > FA FA-チェック

<div class="form-group has-success has-feedback"> 
    <label class="control-label" for="inputSuccess2">Input with success</label> 
    <input type="text" class="form-control"> 
    <span class="fa fa-check form-control-feedback"></span> 
    <span id="inputSuccess2Status" class="sr-only">(success)</span> 
    </div> 

Answer 4

私はこの

<div class="form-group"> 
    <label class="col-md-4 col-lg-4 control-label" for="user.mailId">Mail id</label> 
    <div class="col-md-6 col-lg-6"> 
    <input type="text" name="user.mailId" id="mailid" placeholder="Mail Id" class="form-control rgn" /> 
    </div> 
</div> 

$(document).on('focusout', '#mailid', function(event) { 
    $('#mailid').closest('.form-group').addClass('has-success').addClass("has-feedback"); 
    $('#mailid').after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>'); 

    });