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

Posted 2023-05-07

【中文标题】jQuery Validation required not clear tooltipster error message when based on a function

【英文标题】：jQuery Validation required not clearing tooltipster error message when based on a function

【发布时间】：2018-10-14 06:45:28

【问题描述】：

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

在小提琴中，如果 Misc 数量大于 0，我希望 cmets 是必需的，否则不需要。正如我所说，验证有效，但验证消息没有被清除。

        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

【问题讨论】：

我用你的代码修改了我的答案。

【参考方案1】：

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

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');
,

演示：jsfiddle.net/sk074zwv/9/

Quoting myself from this other answer:

“我还用unhighlight 替换了success 回调。在“可选”字段中，当字段随后被清空时，错误消息从未被删除...这是因为success 函数在这些情况下不会触发。”

---

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