这似乎很简单,但我很难过。我有一个表单,如果另一个字段的值大于零,则需要一个字段。虽然验证确实有效并且允许我提交,但是当我将值更改回零时,错误工具提示不会清除。
在小提琴中,如果杂项金额大于0,我希望评论是必需的,否则不需要。正如我所说,验证工作,但验证消息不会被清除。
jQuery(document).ready(function() {
//Initialize the tooltips
jQuery('.tooltip').tooltipster({
contentAsHTML: true
});
jQuery('#frmForm :input').each(function() {
var tipelement = getTipContainer(this);
jQuery(tipelement).tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right',
multiple: true,
autoClose: true
});
});
jQuery("#frmForm").validate({
ignore: [],
rules: {
MISCComments: {
required: function(element) {
return jQuery("#MISCAmount").val() > 0;
}
}
},
messages: {
MISCComments: "Explain what this payment is for."
},
errorPlacement: function(error, element) {
var $element = jQuery(element),
tipelement = element,
errtxt = jQuery(error).text(),
last_error = '';
tipelement = getTipContainer(element);
last_error = jQuery(tipelement).data('last_error');
jQuery(tipelement).data('last_error', errtxt);
if (errtxt !== '' && errtxt != last_error) {
jQuery(tipelement).tooltipster('content', errtxt);
jQuery(tipelement).tooltipster('show');
}
},
success: function(label, element) {
var tipelement = getTipContainer(element);
jQuery(tipelement).tooltipster('hide');
}
});
//this function selects a container for 'group' elements like
//check box /radio groups
function getTipContainer(element) {
var tipelement = element;
if (jQuery(element).is(":checkbox") || jQuery(element).is(":radio")) {
tipelement = jQuery(element).parents('.container').get(0);
}
return tipelement;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" rel="stylesheet"/>
<form name="frmForm" id="frmForm" method="post">
<div class="form-group row">
<div class="col-md-2">
CE Vendor Fees
<input type="hidden" name="CE_VENDORS" id="CE_VENDORS" value="CE_VENDORS">
</div>
<div class="col-md-3">
<input id="CE_VENDORSInvoiceNumber" name="CE_VENDORSInvoiceNumber" type="text" placeholder="Invoice #" class="form-control input-md" style="20px;" value="">
</div>
<div class="col-md-3">
<input id="CE_VENDORSAmount" name="CE_VENDORSAmount" type="text" placeholder="Amount" class="form-control input-md Amounts" value="2.00" style="text-align: right;">
</div>
</div>
<div class="form-group row">
<div class="col-md-2">
</div>
<div class="col-lg-9">
<input id="CE_VENDORSComments" name="CE_VENDORSComments" type="text" placeholder="Comments" class="form-control input-md" value="">
<label for="CE_VENDORSComments" class="error"></label>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
</div>
</div>
<div class="form-group row">
<div class="col-md-2">
Miscellaneous
<input type="hidden" name="MISC" id="MISC" value="MISC">
</div>
<div class="col-md-3">
<input id="MISCInvoiceNumber" name="MISCInvoiceNumber" type="text" placeholder="Invoice #" class="form-control input-md" style="20px;" value="">
</div>
<div class="col-md-3">
<input id="MISCAmount" name="MISCAmount" type="text" placeholder="Amount" class="form-control input-md Amounts" value="1.00" style="text-align: right;">
</div>
</div>
<div class="form-group row">
<div class="col-md-2">
</div>
<div class="col-lg-9">
<input id="MISCComments" name="MISCComments" type="text" placeholder="Comments" class="form-control input-md" value="">
</div>
</div>
<button class="button-tooltip" title="Submit details">Submit</button>
</form>
答案 0 :(得分:0)
由于您正在动态更改规则,因此在编辑从属字段的值时,您需要以编程方式强制验证此字段。
jQuery('[name="MISCAmount"]').on('blur keyup', function() {
jQuery('[name="MISCComments"]').valid(); // force validation
});
也...
当此字段消隐或规则更改时,success
函数不会在“可选”字段上重新触发。这是根本问题。您的字段已从required
动态更改为“可选”,并且无法强制success
函数重新触发此情况。
解决方案是使用unhighlight
函数而不是success
,它会在每次对某个字段进行有效性评估时触发。以下代码将show
和hide
方法附加到这些默认函数。
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass).tooltipster('hide');
},
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass).tooltipster('show');
},
Quoting myself from this other answer:
“我还将
success
回调替换为unhighlight
。在”可选“字段中,当字段随后被删除时,错误消息从未被删除...这是因为success
函数在这些情况下不会触发。“
我还建议您升级到ToolTipster版本4并重新编写代码。版本4包含一些新的/改进的方法,例如open
和close
,这使得切换工具提示更有意义,并且与highlight
和unhighlight
配合得很好。< / p>