0

我有一个非常庞大的表单，其中包含多种类型的字段（日期、数字、文本、复选框、收音机等）。

我在表单中需要的一项重要行为是能够在 blur 上单独保存表单字段......当然，我需要在 blur 上验证每个字段，如果它是有效字段，我们称之为“saveField() “ 功能。

自然，我使用以下方法初始化表单验证：

$.validate({
        form: '#form-1',
        modules: 'location, logic, html5, security',
        onModulesLoaded: function() {
            $('input.hasCountry').suggestCountry();
        },
    });

稍后为每个表单字段的“验证”事件添加一个事件监听器（我没有添加一个“模糊”事件监听器，因为表单验证器已经为我处理了这个......所以下面是 on("validation “） 方法：

$('input:not([type=radio]),textarea')
        .on('validation', function(evt, valid) {
            var error_div = $(this).parents(".parent-input").find('.custom-error');

            if (!valid) {
                var error_message = evt.target.dataset.validationErrorMsg;
                if (!error_message) {
                    error_message = "Please provide a valid input";
                }
                error_div.html(error_message);
            } else {
                error_div.html("");

                                // saveField();
                console.log("I CALL THE SAVE FUNCTION!");
            }
        })
        .on('beforeValidation', function(value, lang, config) {
            var error_div = $(this).parents(".parent-input").find('.custom-error');
            error_div.html("");
        });

这就是奇怪的地方！ 当我输入一些东西并专注于： - console.log("I CALL SAVE...."); 被触发了……一次！（这是意料之中的）但尝试再次关注它然后模糊，我让 console.log() 被触发了两次 => 意味着 on("validation") 被触发了两次。

JSFiddle 链接：https ://jsfiddle.net/tg3h16ec/4/ 打开浏览器的控制台并按照上述步骤输入内容并集中注意力。然后只需输入一些内容并再次集中注意力。您会注意到 console.log() 计数最初为 1，然后每次开始递增 2。

更新 1 作为以下答案之一建议添加

evt.stopImmediatePropagation();

抑制了问题，但没有解决它。为了扩展这个问题，我更新了我的 JSFiddle 以添加一个单选按钮：https ://jsfiddle.net/zwadhp3s/

4

1 回答 1

0

根据文档 jQuery 事件在元素被验证后触发。所以对于那个解决方案，你必须把evt.stopImmediatePropagation();

$.validate({
    form: '#form-1',
    modules: 'location, logic, html5, security',
    onModulesLoaded: function() {
        $('input.hasCountry').suggestCountry();
    },
});

$('input:not([type=radio]),textarea')
  .on('validation', function(evt, valid) {
  evt.stopImmediatePropagation();
      var error_div = $(this).parents(".parent-input").find('.custom-error');

      if (!valid) {
          var error_message = evt.target.dataset.validationErrorMsg;
          if (!error_message) {
              error_message = "Please provide a valid input";
          }
          error_div.html(error_message);
      } else {
          error_div.html("");

                          // saveField();
          console.log("I CALL THE SAVE FUNCTION!");
      }
  })
  .on('beforeValidation', function(value, lang, config) {
      var error_div = $(this).parents(".parent-input").find('.custom-error');
      error_div.html("");
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.79/jquery.form-validator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js"></script>

<form id="form-1">
  <div class="col-sm-6 parent-input">
    <div class="career-input-wrap input has-success">
        <input name="data[Application][first_name]" column="col-sm-6" class="required valid" value="asdas" data-validation="required" data-validation-error-msg="This field is required" type="text" id="ApplicationFirstName" placeholder="First Name">
    </div>
</div>
  
  <input type="submit" value="submit">
</form>

于 2019-06-29T15:37:32.040 回答