jQuery从HTML块

Question

我正在尝试在更改字段内容时从html中删除错误标签。它适用于input和select，但不适用于input-group。我想要一个适用于所有HTML实例的命令。

我有JSFIDDLE here我的问题。

我的HTML：

<div class="col-xs-12">
  <div class="form-group">
    <select class="form-control error-input" id="cc-exp_month" name="cc-exp_month" autocomplete="cc-exp_month" required="">
      <option value="01">01</option>
      <option value="02">02</option>
      <option value="03">03</option>
      <option value="04">04</option>
      <option value="05">05</option>
      <option value="06">06</option>
      <option value="07">07</option>
      <option value="08">08</option>
      <option value="09">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
    <label class="error-message">This expiry date is invalid</label>
  </div>
</div>

<div class="col-xs-12">
  <div class="form-group">
    <input type="text" class="form-control cc-name  error-input" placeholder="Card Name" name="cc-name" id="cc-name" autocomplete="cc-name" required="">
    <label class="error-message">This card is invalid</label>
  </div>
</div>

<div class="col-xs-12">
  <div class="form-group">
    <div class="input-group">
      <input type="tel" class="form-control cc-cvv error-input" placeholder="•••" maxlength="4" name="cc-cvv" id="cc-cvv" autocomplete="off" required="" data-numeric="">
      <span class="input-group-addon">
                            <a href="#" id="cvv-popover" data-toggle="popover" data-trigger="hover" title="" data-placement="top" data-original-title="CVV">
                                <i class="icon-help ion-fw"></i>
                            </a>
                        </span>
    </div>
    <label class="error-message">Invalid cvv</label>
  </div>
</div>

我的JS在更改时删除错误类和标签：

$('#cc-exp_month').change(function() {
  $('#cc-exp_month').removeClass('error-input');
  $('#cc-exp_month').parent('.form-group').find('label.error-message').remove();
});

$('#cc-name').change(function() {
  $('#cc-name').removeClass('error-input');
  $('#cc-name').parent('.form-group').find('label.error-message').remove();
});

$('#cc-cvv').change(function() {
  $('#cc-cvv').removeClass('error-input');
  $('#cc-cvv').parent('.form-group').next('.error-message').remove();
});

CVV字段失去了它的类但我无法删除下面的错误标签。我希望实现一个＆＃34;泛型＆＃34; jquery链式命令，可以在两个实例（输入和输入组）上工作。

谢谢！

Answer 1

<强> Fiddle

$('input').change(function() {
  $(this).removeClass('error-input');
  $(this).closest('.form-group').find('label.error-message').remove();
});

$('select').change(function() {
  $(this).removeClass('error-input');
  $(this).closest('.form-group').find('label.error-message').remove();
});

Answer 2

如果你查看你的html，sudo hdfs namenode -format的最近父母是.cc-cvv而不是.input-group。 尝试更改

.form-group

到

$('#cc-cvv').parent('.form-group').next('.error-message').remove() 

Answer 3

您不能在输入标记上使用更改事件 对inputbox使用keyup或keydown事件：

 foreach (Principal p in grp.GetMembers(false).OfType<Student>())
 {
     Console.WriteLine(p.SamAccountName + " - " + p.DisplayName);
 }

Answer 4

利用event bubbling

$("div.form-group").on("change", function() {
    var div = $(this);
    div.find(".error-input").removeClass("error-input");
    div.find("label.error-message").remove();
})

fiddle

Answer 5

您可以使用jQuery closest函数来实现此目的，并使用$(this)选择链式选择器。

<强> E.g。

$(function() {
  $('#cc-exp_month, #cc-name, #cc-cvv').on('change', function() {
    // Do whatever validation you need..

    $(this).removeClass('error-input');
    $(this).closest('.form-group').find('label.error-message').remove();
  });
});

这是您的代码段。

$(function() {
  $('#cc-exp_month, #cc-name, #cc-cvv').on('change', function() {
    // Do whatever validation you need..
    
    $(this).removeClass('error-input');
    $(this).closest('.form-group').find('label.error-message').remove();
  });
});

.error-message {
  color: red;
}

.error-input {
  border-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12">
  <div class="form-group">
    <select class="form-control error-input" id="cc-exp_month" name="cc-exp_month" autocomplete="cc-exp_month" required="">
      <option value="01">01</option>
      <option value="02">02</option>
      <option value="03">03</option>
      <option value="04">04</option>
      <option value="05">05</option>
      <option value="06">06</option>
      <option value="07">07</option>
      <option value="08">08</option>
      <option value="09">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
    <label class="error-message">This expiry date is invalid</label>
  </div>
</div>

<div class="col-xs-12">
  <div class="form-group">
    <input type="text" class="form-control cc-name  error-input" placeholder="Card Name" name="cc-name" id="cc-name" autocomplete="cc-name" required="">
    <label class="error-message">This card is invalid</label>
  </div>
</div>

<div class="col-xs-12">
  <div class="form-group">
    <div class="input-group">
      <input type="tel" class="form-control cc-cvv error-input" placeholder="•••" maxlength="4" name="cc-cvv" id="cc-cvv" autocomplete="off" required="" data-numeric="">
      <span class="input-group-addon">
        <a href="#" id="cvv-popover" data-toggle="popover" data-trigger="hover" title="" data-placement="top" data-original-title="CVV">
          <i class="icon-help ion-fw"></i>
        </a>
      </span>
    </div>
    <label class="error-message">Invalid cvv</label>
  </div>
</div>

Answer 6

这是您的工作代码。

$("div.form-group").on("change", function() {
    var div = $(this);
    if(div.find('input').val() != ""){
      div.find(".error-input").removeClass("error-input");
      div.find("label.error-message").hide();
    }else{
      div.find("input").addClass("error-input");
      div.find("label.error-message").show();
    }
})