jquery if 循环使用引导类

Question

我正在使用 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');
            }
         });

这是我用来获取验证状态的网站：bootstrap example which i am following click here under form -> control status

Answer 1

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

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

Answer 2

试试这个：

$(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");
        }
    });
});