jQuery 基于函数时需要验证不清除工具提示错误消息

Question

这看起来很简单，但我很难过。我有一个表单，如果另一个字段的值大于零，则需要一个字段。虽然验证确实有效并允许我提交，但当我将值更改回零时，错误工具提示并未清除。

在fiddle中，如果Misc amount大于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">&nbsp;
    </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>

Fiddle here

Answer 1

由于您是动态更改规则，因此您需要在编辑相关字段的值时以编程方式强制验证此字段。

jQuery('[name="MISCAmount"]').on('blur keyup', function() {
    jQuery('[name="MISCComments"]').valid();  // force validation
});

还有...

success 函数不会在 "optional" 字段被清空或更改规则时重新触发该字段。这是根本问题。您的字段从 required 动态更改为 "optional"，并且在这种情况下无法强制 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');
},

演示：jsfiddle.net/sk074zwv/9/

Quoting myself from this other answer:

"I also replaced the success callback with unhighlight. On "optional" fields, the error message was never removed when the field was subsequently blanked out... this is because the success function does not fire under these circumstances."

我还建议您升级到 ToolTipster 版本 4 并为此重新编写代码。版本 4 包含一些 new/improved 方法，例如 open 和 close，这对于切换工具提示更有意义，并且与 highlight 和 unhighlight 一起工作得很好.

jQuery 基于函数时需要验证不清除工具提示错误消息

jQuery Validation required not clearing tooltipster error message when based on a function

jquery

jquery-validate

tooltipster