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

我的代码是here 我在推荐this

Answer 1

我相信你所寻找的内容已经内置到bootstrap中（我假设你使用的是基于你的jsfiddle）

，可在此处获取：http://getbootstrap.com/css/#forms-control-validation

此选项使用bootstrap glyphicons，但如果你想使用font-awesome图标，我在下面创建了一个选项。它只是切换出图标。

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

glyphicon glyphicon-ok - ＆gt; 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

无法使用：之前，之后输入。创建新的并添加“可用”类。

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

  });

在文本框

4 个答案: