formのonsubmitで処理を中断させる方法

formでPOSTする前にデータを調整・チェックしてエラーがあればPOSTの処理を止めたい、というケース

<script type="text/javascript">
    function pre() {
        if (//判定処理) {
            return false;
        } else {
            return true;
        }
    }
</script>

//NGパターン
<form action="..." onsubmit="pre()">
    <input type="submit" value="確認する">
</form>

//OKパターン
<form action="..." onsubmit="return pre()">
    <input type="submit" value="確認する">
</form>

Javascriptの関数内でreturn したら処理を止めて欲しいところですが、onsubmitでreturnしないとうまく行きません。

参考

http://blog.livedoor.jp/sasata299/archives/51373855.html

onsubmit内で複数のJavascriptを処理する場合、いずれかのfunctionでエラーになった場合に処理を止めたい時には

http://stackoverflow.com/questions/11806253/onsubmit-multiple-javascript-functions

が参考になりそうです。

間違えやすいパターンとしては

<form action="..." onsubmit="return pre1();pre2();">
    <input type="submit" value="確認する">
</form>

ですね。これだとpre1の関数の結果をreturnしてしまうので、pre2が処理されません。

Aipoの場合、onsubmitでaimluck.io.submitを呼んでAjaxリクエストをするケースが多いです。

<form action="..." onsubmit="aimluck.io.submit(this,'indicator-dlg-','portletId',aipo.schedule.onReceiveMessage;return false;">
    <input type="submit" value="確認する">
</form>

処理の順番が決まっている時には

<form action="..." onsubmit="if(pre1()){if(pre2()){aimluck.io.submit(this,'indicator-dlg-','portletId',aipo.schedule.onReceiveMessage)}};return false;">
    <input type="submit" value="確認する">
</form>

みたいにするとよさそうです。