[英]jQuery remove error label from HTML block
I am trying to have an error label be removed from my html when the field content is changed. 字段内容更改时,我尝试从HTML中删除错误标签。 It works fine on
input
and select
, but not in input-group
. 它在
input
和select
上工作正常,但在input-group
不能正常工作。 I want one command that will works on all instances of HTML. 我想要一个适用于所有HTML实例的命令。
I have a JSFIDDLE here of my issue. 我的问题在这里有一个JSFIDDLE 。
My HTML: 我的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>
My JS to remove error class and label on change: 我的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();
});
the CVV field looses its class but I cannot delete the error lable below. CVV字段会松散其类,但我无法删除以下错误标签。 I am looking to achieve a "generic" jquery chained command that can work on both instances (input and input-group).
我正在寻找一种可以在两个实例(输入和输入组)上都可以使用的“通用” jquery链式命令。
Thanks! 谢谢!
If you look in your html the closest parent of .cc-cvv
is .input-group
and not .form-group
. 如果您在html中查找,则
.cc-cvv
.input-group
的最接近的父.cc-cvv
是.input-group
而不是.form-group
。 Try changing 尝试改变
$('#cc-cvv').parent('.form-group').next('.error-message').remove()
to 至
$('#cc-cvv').parent('.input-group').next('.error-message').remove()
you cannot use change event on input tag use keyup or keydown event for inputbox : 您不能在输入标签上使用change事件对inputbox使用keyup或keydown事件:
$('#cc-name').keydown(function() {
$('#cc-name').removeClass('error-input');
$('#cc-name').parent('.form-group').find('label.error-message').remove();
});
Make use of event bubbling 利用事件冒泡
$("div.form-group").on("change", function() {
var div = $(this);
div.find(".error-input").removeClass("error-input");
div.find("label.error-message").remove();
})
You can use jQuery closest function to achieve this, and use $(this)
to select the chained selectors. 您可以使用jQuery 最接近的函数来实现此目的,并使用
$(this)
选择链接的选择器。
Eg 例如
$(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();
});
});
Here's your snippet. 这是您的摘录。
$(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>
Here is your working code. 这是您的工作代码。
$("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(); } })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.