knowledge::short

割と重要な部分と思うが忘れがちなのでメモ。

気の利いているフォームだと大体次の実装がある（と思う）。

• 入力画面のJSバリデーション
• 送信ボタンからの多重送信防止

上記を踏まえて、それらを実現する為の実装例を以降に示す。

例えば、次のようなフォームがあるとする。

<form action="hoge"  method="POST" enctype="multipart/form-data"><input type="text" name="fuga" />
<button type="button">送信</button>
</form>

これに対して、次のようなJSを組む（※jQuery必須）。

<script>
$(funciton(){
  $('form button').on('click',function(){
    if ( ＜フォームのバリデーションがOKかの判断式＞ ){
    //trueの場合.
      $(this).prop('disabled',true);
      $('form').submit();
    }
    else{
    //falseの場合.
      ＜例外処理＞
      return false;
    }
  });
});
</script>

フォームのbuttonタグにはtype="button"を指定して、ボタンクリックでフォームの送信が行われないようにする。

フォームの送信は、buttonへのclickイベントの処理中でsubmit() を実行して行う。

trueの場合はbuttonにdisabledを設定して、clickイベントが起きないようにすることで、多重送信を防ぐ。

return false;は誤送信防ぐための記載だったと思うが、確認できてないｽﾏﾝ。

以上のような実装をベースにすれば、ユーザーが送信ボタンを送信した際に、フォームの入力内容のバリデーションや多重送信防止の処理を介した送信処理を行う実装の構築がやりやすくなるはず。

関連するタグ

関連するタグは現在ありません。