0

我有一个表单，其中输入框预填充了默认值。如果字段为空，jQuery 事件处理程序会清除 'focus' 上的值并恢复 'blur' 上的默认值。

$('form input').on('focus blur', function (event) {
  var eventTarget = $(this);
  if (eventTarget.val() === eventTarget.data('default')
      || eventTarget.val() === '') {
    if (event.type === 'focus') {
      eventTarget.val('').removeClass('empty');
    } else {
      eventTarget.val(eventTarget.data('default')).addClass('empty');
    }
  }
}).trigger('blur');

在提交之前（通过 AJAX），我清空了所有包含默认值的字段并触发客户端验证（对于必填字段）：

$('form').on('submit', function (e) {
  $('form input').each(function () {
      if ($(this).val() === $(this).data('default')) {
        $(this).val('');  // remove default value, so 'required' validation triggers on empty fields
      }
  });

  if ($('form').valid()) {
      $.ajax(...);
  } else {
    $('form input').trigger('blur');  // trigger 'blur' to restore default values
                                      // Problem: This clears the validation messages
  }
});

到目前为止，一切都很好，但是在那之后，我的表单字段当然是空的。如果我再次触发“模糊”事件，我可以恢复默认值，但这会使验证消息消失，可能是因为客户端验证再次运行并且看到字段不再​​为空。

但是，当我手动单击进出表单字段时，会恢复默认值并保留验证消息。两者都通过相同的“模糊”处理程序。我无法弄清楚差异在哪里。

编辑： 我后来发现我可以完全禁用“模糊”验证：

$('form').validate().settings.onfocusout = false;

这暂时解决了我的问题，但我仍然想知道为什么当从脚本或用户交互触发时模糊/聚焦的反应不同。

4

0 回答 0