ぽんぽこ開発日記

主にHTML, CSS, JavaScriptなどフロントエンドの話を。目指せ脱初心者。

JSでsubmitイベント時のreturn falseの扱い方

会員登録フォームなどで登録ボタンを押したときに名前フォームが空だったりするときに「入力しないと登録できません」とエラーを出すよう設計することがよくあります。

その機能を実装しようと思っていたのですがつまづいてしまったのでメモがてらまとめました。

 

これだとsubmitされてしまう

最初、このようにシンプルに<script></script>内の設定でいけると思って実装開始。しかしわざとnameを空にしてsubmitするとアラートは出てくれるんだけど、きちんとsubmitされリロードされる...困りました...

<form action="post" id="sign_up" onsubmit="validate()">
 <input type="text" id="name">
 <input type="email" id="email">
 <input type="password" id="pwd">
 <input type="submit" value="会員登録">
</form>

<script>
 var validate = function(){
  var name = document.getElementById('name').value;
  if(name.length == 0){
   alert("名前を入力してください。");
   return false;
  } else{
   return true;
  };
 };
</script>

 

どうしてsubmitされてしまうのか?

どうしてsubmitされてしまうのか?
if文の中でエラーが起きたときはちゃんとreturn falseを書いて明示してあるからsubmit処理を停止してくれるはずだと思ったのですが、停止してくれない。シンタックスエラーかと思いましたがそうでもないようです。問題はイベントハンドラがreturn falseを判断していないからでした。<script></script>内でreturn falseを書いても、イベントハンドラではfalseということを認識はしないようです。

<form action="post" id=“sign_up” onsubmit=“validate()”;>

だと、ただそのイベントを実行するだけのようです。なのでイベントハンドラにreturnの結果を知らせたいときは

<form action="post" id=“sign_up” onsubmit=“return validate()”;>

としてあげるとちゃんとエラーが起きたときはsubmit処理を停止してくれます。まずここまでが長かったのですが、jQuery使えばいとも簡単に解決できることを知りました。


jQueryでこう書き直してもOK

<form id="sign_up">
 <input type="text" id="name">
 <input type="email" id="email">
 <input type="password" id="pwd">
 <input type="submit" value="会員登録">
</form>
<script>
 $(function(){
  $('#sign_up').submit(function(){
   var name = $('#name').val();
   if(name.length == 0){
    alert("名前を入力してください。");
    return false;
   };
  });
 });
</script>

jQueryを使うと自動的にイベントの結果(true or false)まで認識してくれるよう。コード量も少なくなるし、見通しもこっちのほうが良いのでこっちを採択。