Question

我的表格非常大，其中包含许多类型的字段（日期，数字，文本，复选框，单选框等）。

我需要在表单中使用的重要行为之一是能够在模糊时分别保存表单字段...当然，我需要在模糊时验证每个字段，如果它是有效字段，我们称之为“ saveField（）”函数。

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

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

稍后为每个表单字段的“ validation”事件添加一个事件侦听器（我尚未添加“ Blur”事件侦听器，因为表单验证器已经为我负责了...所以下面是（“验证”）方法：

$('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/

Answer 1

根据文档中元素验证后触发的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>

调用“ on（'validation'）”时多次调用“ validate”函数

1 个答案: