画面離脱時のモーダルをsubmit時うまく制御したい

Question

画面離脱時のモーダル表示の実装を行なっています。

jsで以下のように実装しました。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $("input[type=text]").change(function() {
        $(window).on('beforeunload', function() {
            return '投稿が完了していません。このまま移動しますか？';
        });
    });
    $("input[type=submit]").click(function() {
        $(window).off('beforeunload');
    });
});
</script>
<form method="post" action="foo.cgi">
<input type="text" value="" />
<input type="submit" value="送信" />
</form>

submit時にはモーダルを表示しないようにoffメソッドでイベントハンドラを取り除いています。

しかしここで問題があります。
質問としては、
submitボタン押下時に
・バリデーションエラー
・モーダルのこのページにとどまる押下
をされた場合、どのようにoffしないようにすればいいでしょうか？あるいは、再設定すればいいでしょうか？

というのも、offで一度イベントハンドラを削除されるので、次にページ遷移したときにモーダルが表示されません。
「画面遷移する寸前にイベントハンドラ削除」みたいなことをしようと思い、pagehideイベントを使おうとしましたが、
そのイベントは発生しませんでした。
windowにpagehideをonした形です。

こういう時の対応方法がわかる方がいればよろしくお願い致します。

Answer 1

僕なら、バリデーションエラーを判定して

あるいは、再設定すればいいでしょうか？

でいきますね。

他には、submitをajaxにしてもやりやすいと思いますが、現状のロジックをサーバーサイド含めていろいろ変更しなければいけないでしょうから、変更するのはめんどくさそうですね。

Comments

[k499778]

回答ありがとうございます。
バリデーションエラーに関しては、jsでバリデーションチェックしてる、後にロジック入れればなんとかなる気はしますが(共通化を図るため少し不安)、画面離脱モーダル立ち上がって、「このページにとどまる」にした場合はどうすればいいでしょうか？イベントハンドラが削除されているため、次はモーダルが立ち上がりません。

[h_daido]

具体的なケースとしては、
1. テキスト変更
2. 離脱
3. 画面離脱モーダルが立ち上がる -> 「とどまる」を選択
4. 再度離脱
というケースということであってます？

であればまだoffされていないはずですので、問題なさそうですが。。。

[h_daido]

参考用にpenつくておきました
https://codepen.io/anon/pen/Jpgmxv

[k499778]

返答ありがとうございます。penまで作っていただき。
あーそうですね。勘違いしていました。
submitボタン押下時はそもそもモーダルが立ち上がらないので、そのようなケースは起こり得ないですね。
やはりバリデーションエラーだけを乗り越えられれば、このような実装でいけそうですね。

[k499778]

ちなみにバリデーションエラー後にoffを入れる上で懸念していることがあるのですが、
jQuery Validation(jquery.validate.min.js)を使っており、「バリデーションエラーがあれば」の条件を確実にバリデーションの後にできるのか不安です。jQuery Validationが少し変な動きをしており、ひょっとすると非同期処理を中で行っているかもしれないので。
そういった場合、読み込み順が確実にoffの方が後にする方法ってありますでしょうか？

[h_daido]

基本的にフローとしては以下になるとおもいます
0. テキスト変更 -> onにする
1. submit -> offにする
2. もしsubmitが失敗していれば(= バリデーションにかかっていれば)、再度bindする。（* このときにはテキスト変更がなくてもonにする）

あとは前提としてですが、バリデーションをフロントエンドのみで行うのは危険だと思います。
フロントエンドバリデーションはユーザビリティの向上のみを目的とし、入力値が正しいことの検証はサーバーサイドで行わないと、セキュリティホールにもなりますし、思わぬバグも呼び込んでしまいます。

ですので、「バリデーションエラーがあれば」の判定はsubmitの結果で判定するほうが良いかと思います。
具体的な方法はsubmitした結果のレスポンスがどのようになるか？次第ではありますが、サーバーサイド側の人と相談してみても良いのではないでしょうか？エラーメッセージなどを表示しているでしょうから、方法は絶対あるはずと思います。

[k499778]

回答ありがとうございます。
サーバー側のバリデーションも入れています。
サーバー側でバリデーションがあった場合は、画面リロードされるのでonした状態になっているので問題ありません。