YiiのActiveFormサブミットを確認ダイアログ付きにするjQueryプラグイン

Yii で削除リンクなどに使われるあの「本当に実行しますか」の確認ダイアログを通常のフォームサブミットにも使いたいので jQuery プラグインを書きました。Yii 2.0.* 専用です。

confirm-before-submit.js

(function($) {
    $.fn.confirmBeforeSubmit = function(options) {
        options = $.extend({
            message: "本当に実行しますか。"
        }, options);

        this.each(function() {
            var $button = $(this);
            var $form = $button.closest('form');

            var confirmed = false;
            var message = options.message;

            $button.on('click', function (event) {
                confirmed = false;
            });
            $form.on('beforeSubmit', function () {
                if (!confirmed) {
                    var data = $form.data('yiiActiveForm');
                    yii.confirm(message, function () {
                        setTimeout(function(){
                            confirmed = true;
                            data.validated = true;
                            $form.submit();
                        }, 1);
                    });
                    //data.validated = false;
                    return false;
                } else {
                    return true;
                }
            });
        });
    };
})(jQuery);

使い方

<div class="form-group">
    <?= Html::submitButton($model->isNewRecord ? '作成する' : '保存する', [
        'class' => $model->isNewRecord ?
            'btn btn-success submit' :
            'btn btn-primary submit',
    ]) ?>
</div>
<?php if ($model->isNewRecord) {
    $this->registerJs(
"jQuery('.forum-form form .submit').confirmBeforeSubmit({
    message: 'なにか作成しようとしています。本当によろしいですか?'
});"
    );
} ?>

「作成する」ボタンをクリックすると:

Yii2の削除確認ダイアログをかっこ良くする と合わせて使うと効果的ですね。