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;

これは今のところ私の問題を回避しますが、スクリプトまたはユーザーの操作からトリガーされたときに、blur/focusout の反応が異なる理由を知りたいです。

4

0 に答える 0