入力ボックスにデフォルト値があらかじめ入力されているフォームがあります。フィールドが空の場合、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 の反応が異なる理由を知りたいです。