使用 jQuery 显示引导验证图标答案

【问题标题】：Display bootstrap validation icons with jQuery使用 jQuery 显示引导验证图标
【发布时间】：2015-07-08 09:36:02
【问题描述】：

我想知道如何在文本框焦点消失后以编程方式在验证消息之间进行交换。

我有这个标记：

  <div class="form-group" style="width: 100%;" id="divFirstName" runat="server">
                                        <input type="text" placeholder="Student First Name" runat="server" id="txtFirstName" clientidmode="Static" value="" class="form-control" maxlength="30" />
                                        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" id="tt2" clientidmode="Static" runat="server" Visible="False"></span>
                                    <span id="inputSuccess2Status" runat="server" clientidmode="Static" Visible="False" class="sr-only">(success)</span>
                                    <span class="glyphicon glyphicon-remove form-control-feedback" Visible="False" runat="server" aria-hidden="true"></span>
                                    <span id="inputError2Status" class="sr-only" runat="server" Visible="False">(error)</span>
                                    </div>

然后我有这个脚本，以防文本框中有一个值：

 $(this).attr("aria-describedby", "inputSuccess2Status");
                $("#tt2").attr("visibility", "visible");
                $("#inputSuccess2Status").attr("visibility", "visible");

脚本执行后不显示字形图标。

你看出什么不对了吗？我在这里做的有些过分吗？我只想做的是将焦点放在控制之外，如果有值则显示 glyphicon-ok 否则显示 glyphicon-remove。

【问题讨论】：

把你的代码放到 jsfiddle.net 里，这样我们就可以看到它的直播了 (stackoverflow.com/help/mcve)，否则很难提供帮助。

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这就是我们要找的吗？

HTML

<div class="form-group has-feedback" style="width: 100%;" id="divFirstName" runat="server">
    <input type="text" placeholder="Student First Name" runat="server" id="txtFirstName" clientidmode="Static" value="" class="form-control" maxlength="30" />    
</div>`

jQuery

$('#txtFirstName').change(function(){
    $('.form-control-feedback').remove();
    if($(this).val().length > 0){        
        $('#divFirstName').append('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" id="tt2" clientidmode="Static" runat="server" Visible="False"></span>');
    }else{
        $('#divFirstName').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" id="tt2" clientidmode="Static" runat="server" Visible="False"></span>');
   }
});

实时预览

jsFiddle Example

【讨论】：