Showing font awesome icon inside text box

Question

I have a textbox on focus out, I am checking is if mail_id is already registered or not if not registered then I want to show the right symbol(correct font awesome symbol) in the text box(right side) and if not then I want to show the cross symbol.

I tried following

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;
  }

My code is here I am refering this

http://stackoverflow.com/questions/26325789/jquery-showing-wrong-and-right-icons-for-validation -refer this answer you might get some help. — Sorangwala Abbasali, Jan 13 '17 at 05:56

score 2 · Answer 1 · answered Jan 13 '17 at 06:12

I believe what you are looking for is already built into bootstrap (I am making an assumption that you are using this based off your jsfiddle)

and is available here: http://getbootstrap.com/css/#forms-control-validation

This option uses the bootstrap glyphicons but if you want to use font-awesome icons I have created an option below. It's just switching out the icons.

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>

score 1 · Answer 2 · answered Jan 13 '17 at 06:01

1

Can not be used :before, :after for input. Make new and add class "available".

answered Jan 13 '17 at 06:01

grinmax

1,835
1
10
13

score 1 · Answer 3 · answered Jan 13 '17 at 06:04

1

Here is a demo you can use and refer for your application usage. Js fiddle showing what can be in use for you

Hope this helps :).

answered Jan 13 '17 at 06:04

Sorangwala Abbasali

821
10
26

score 1 · Answer 4 · answered Jan 13 '17 at 06:46

I tried this

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

  });

Showing font awesome icon inside text box

4 Answers4