発生した事象
HTMLフォームを使った画面で、ボタンクリック時にJavaScriptの fetch によりサーバへ非同期通信を行う実装を行った。
フォーム入力後ボタンをクリックすると、サーバ処理は正常に完了するものの、画面がリロードされfetch の処理が途中で中断し、画面遷移に失敗した。
一方で、なぜかフォーム未入力時はリロードがされずにfetch が正常動作し、画面遷移に成功していた。
問題の原因
ボタンが<button type="submit">であるため、デフォルトのフォーム送信（submit イベント）が発生し、ページリロードが行われた。
入力がある場合、HTMLフォームは正常な送信条件を満たすため、fetch中でもリロードが優先されfetch処理が中断された。
一方で、ボタンにrequiredを付与していたため、未入力時はバリデーションエラーにより、デフォルトのフォーム送信がブロックされ、リロードが防がれたため fetch が完了していた。
ブラウザ側では処理が途中で途切れるが、すでにサーバにはリクエストが届いているため、サーバ側では処理が正常に完了している。
解決方法
方法1: event.preventDefault() でデフォルト送信を無効化
方法2: type="submit" を type="button" に変更することで、デフォルトのフォーム送信を防ぐ。
技術的な学び
フォームのデフォルト動作に注意
<button type="submit">は意図せずページ遷移やリロードを引き起こす可能性がある。