Проверка jQuery требует не очищать сообщение об ошибке tooltipster, когда основано на функции - PullRequest
Новая
       45

Проверка jQuery требует не очищать сообщение об ошибке tooltipster, когда основано на функции

0 голосов
/ 03 мая 2018

Это казалось чем-то простым, но я в тупике. У меня есть форма и я хочу, чтобы поле было обязательным, если значение другого поля больше нуля. Хотя проверка на самом деле работает и позволяет мне отправлять сообщения, всплывающая подсказка об ошибке не очищается при изменении значения на ноль.

В скрипте, если сумма Misc больше 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>

Скрипка здесь

1 Ответ

0 голосов
/ 04 мая 2018

Поскольку вы динамически изменяете правило, вам нужно программно принудительно проверить правильность этого поля при редактировании значения зависимого поля. 

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

Кроме того ... * * 1004

Функция 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');
},

DEMO: jsfiddle.net / sk074zwv / 9 /

Цитирую себя из этого другого ответа :

"Я также заменил обратный вызов success на unhighlight. В« необязательных »полях сообщение об ошибке никогда не удалялось при последующем отключении поля ... это потому, что функция success не срабатывает при этих обстоятельствах. "

Я также рекомендую вам обновить до ToolTipster версии 4 и переработать код для этого. Версия 4 содержит некоторые новые / улучшенные методы, такие как open и close, которые имеют немного больше смысла для переключения подсказок и очень хорошо работают с highlight и unhighlight.

...