よく、リンクで onclick とか、フォームで onsubmit とかするじゃないですか。それで、今回もこんな感じのことをやろうと思ったんです。
  • テキストが空だったら警告を出して処理を中断する

  • テキストが空じゃなかったらアクションを実行する

「onsubmit の返り値が false なら submit の処理が中断されるだろう」と思ってさくっとこんな感じに書いてみました。いたってシンプルです。

<script type="text/javascript">
    function blank_check() {
        if (document.getElementById('name').value == "") {
            alert("ニュウリョクーヽ(゚∀゚)ノ ニュウリョク-ヽ(゚∀゚)ノ");
            return false;
        } else {
            return true;
        }
    }
</script>

<form action="..." onsubmit="blank_check()">
    <input type="text" id="name">
    <input type="submit" value="次へ">
</form>

ただ、これだと確かにテキストが空のときに警告は表示されるものの、そのまま処理が中断せずに進んでしまいました。。処理を中断させるには、イベントハンドラ (onsubmit) の返り値として false を返してあげないといけないようです。つまりこんな感じにしてあげればおkです。

<form action="..." onsubmit="return blank_check()"> // return
    <input type="text" id="name">
    <input type="submit" value="次へ">
</form>

onclick で、このように return false を付けるのも全く同じ理由です。イベントハンドラ (oncick) の返り値として false を返すことで本来の動作(クリック時の動作)を中断することが出来ます。

<a href="javascript:void(0)" onclick="hoge();return false;">click</a>

関数内での返り値と、イベントハンドラでの返り値っていうのがどうも違うんですね〜。というか、ブラウザが関数の返り値なんか見てなくて、イベントハンドラの返り値 (return xxx) しか見てない??詳しい違いはわかりませんが気を付けてはまらないようにしたいです。
このエントリーをはてなブックマークに追加