在文本框中顯示字體真棒圖標

Question

我有一個重點關注的文本框，我在檢查是否已注冊mail_id，如果尚未注冊，則想在文本框（右側）中顯示正確的符號（正確的字體真棒符號），如果沒有，我想要顯示十字符號。

我嘗試了以下

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>

jQuery的

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

的CSS

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

我的代碼是在這里我指這

Answer 1

我相信您正在尋找的東西已經內置在引導程序中（我假設您正在基於jsfiddle使用它）

並在此處提供： http ： //getbootstrap.com/css/#forms-control-validation

該選項使用引導字形，但是如果您想使用超棒的圖標，我在下面創建了一個選項。 它只是切換圖標。

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

glyphicon glyphicon-ok-> fa fa-check

  <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 2

：before，：after不能用於輸入。 新建並添加類“可用”。

Answer 3

這是一個演示，您可以使用並參考您的應用程序用法。 Js fiddle showing what can be in use for you

希望這可以幫助 ：）。

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>');

  });