jquery if循环使用引导程序类

jquery if loop using bootstrap classes

本文关键字：引导程序 if 循环 jquery      更新时间：2023-09-26

我使用twitter引导程序验证类在文本框中获取成功和错误。我有两个文本框，所以当用户点击任何文本框时，jquery应该首先检查文本框是否为空，如果为空，那么框周围应该显示红色。当用户开始输入数据时，文本框应将颜色更改为绿色。我想把这种技术应用到所有的文本框中。这就是我所做的，但当运行页面时，它不起作用？：

<div class="test">
    <div class="form-group has-success">
    </div>
        </div>
    <div class="form-group has-error">
    </div>
         <div id="pt" class="tab-pane active">           
                    <asp:Label ID="label1" CssClass="form-group" runat="server" Text="Name:"></asp:Label>
                    <asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" ></asp:TextBox>
                   <asp:Label ID="label2" CssClass="form-group" runat="server" Text="Surname:"></asp:Label>
                    <asp:TextBox ID="TextBox2" CssClass="form-control" runat="server"></asp:TextBox>           
  </div>
Jquery
      $("TextBox").click(function () {
            if ($.trim($('TextBox').val()) == "") {
                $('.form-group has-error');
            }
            else if ($.trim($('TextBox').val()) != "") {
                $('.form-group has-success');
            }
         });

这是我用来获取验证状态的网站：我正在关注的引导程序示例单击表单->控制状态下的此处

试试这个：

$(function(){
    $("#TextBox1").on("click", function(){
        if($("#TextBox1").val().length === 0){
            $("#TextBox1").parent().addClass("has-error");
        }
    });
    $("#TextBox1").on("keydown", function(){
        if($("#TextBox1").parent().hasClass("has-error")){
            $("#TextBox1").parent().removeClass("has-error");
            $("#TextBox1").parent().addClass("has-success");
        }
    });
    $("#TextBox2").on("click", function(){
        if($("#TextBox2").val().length === 0){
            $("#TextBox2").parent().addClass("has-error");
        }
    });
    $("#TextBox2").on("keydown", function(){
        if($("#TextBox2").parent().hasClass("has-error")){
            $("#TextBox2").parent().removeClass("has-error");
            $("#TextBox2").parent().addClass("has-success");
        }
    });
});

您的HTML格式似乎不正确。我不确定我是否正确理解了你的问题，但如果你想显示div，那么你的代码应该这样工作：

       $("#tbDepartment").click(function () {
            if ($.trim($('#tbDepartment').val()) == "") {
                $('.form-group has-error').show();
            }
            else if ($.trim($('#tbDepartment').val()) != "") {
                $('.form-group has-success').show();
            }
         });
相关文章：