jQueryでフォームの送信を一旦止め、処理を挟んでから送信する方法

既存のフォームにバリデーション等何かしらの処理を挟みたい場合、jQuery を使えば簡単に実現できます。

実装方法

例として、まず下記のような単純なフォームがあるとします。

<form method="post" action="/hoge/confirm/">
    <input type="text" name="name" /><br />
    <input type="tel" name="name" /><br />
    <input type="fax" name="name" /><br />
    <input type="submit" value="送信" />
</form>

通常であれば、送信ボタンを押したら /hoge/confirm/ にすぐに遷移してしまいますが、ここで送信前に一旦処理を挟みたいと思います。

間に挟む処理の引数で処理完了時のコールバック関数を指定できる場合

間に挟む処理の引数で、処理完了時のコールバック関数を指定できる場合、そのコールバック関数内で送信処理を行います。submit イベントの最後に return false; を入れて自動で submit されないようにすることが重要です（これがないと処理完了時のコールバック関数が実行されない場合でも submit されてしまう）。

jQuery( funciton( $ ) {
    // form が submit されたとき
    var form = $( 'form' );
    form.submit( function( e ) {
        // 何か処理をする
        // 完了時にコールバック関数を実行
        hoge( 'fuga', function() {
            // 同じ処理が二度走らないように、submitイベントを消してからsubmit
            form.off( 'submit' );
            form.submit();
        } );
        // 自動で submit されないように処理を止める
        return false;
    } );
} );

間に挟む処理の引数で処理完了時のコールバック関数を指定できない場合

間に挟む処理の引数で処理完了時のコールバック関数を指定できない場合は、処理の完了時間を見越して setTimeout で送信時間を遅らせます（API等で通信が発生する場合を想定。普通にバリデーション処理等であれば待ち時間は必要ないかもしれません）。

jQuery( funciton( $ ) {
    // form が submit されたとき
    var form = $( 'form' );
    form.submit( function( e ) {
        // 何か処理をする
        hoge();
        fuga();
        // 一旦 submit を止める
        p.preventDefault();
        // submit を遅らせて実行
        setTimeout( function() {
            form.off( 'submit' );
            form.submit();
        }, 300 );
    } );
} );