Rails で required 属性指定した際に Safari でフォームが送信できない


Rails で input 要素の required 属性を指定したときに、Safari でフォームを送信できない問題があった。

$ rails new cannot_submit
$ cd cannot_submit
$ rails g controller home show
<!-- app/views/home/show.html.erb -->
<form action="/">
<input required="required" name="user">
<input type="submit">
</form>

Safari でこの form を表示し、何も入力せず submit を押すと、何も起こらない (リクエスト発行されない / 表示変わらない / エラーも発生しない)。

調べると下記の条件で再現する。

  • jquery_ujs を require している
  • required 属性と name 属性を指定している input の value が空
  • Safari / Mobile Safari を使用

どうやら、jquery_ujs が required な input を検証して、送信をキャンセルしているようだ。

Chrome や Firefox では、required な input が空なら submit 時にポップアップがでるが、Safari にはその機能がないため、何が原因で送信できないのか非常にわかりにくい。

2011 年に issue として挙げられている が、"desired behavier" であるとの理由で close されたまま。うーむ。

とりあえずの回避策としては、jquery_ujs による検証失敗時に発火する ajax:aborted:required イベントをハンドルして false を返せば、リクエストが送信されるようになる。Chrome や Firefox の動作にも影響はない。

$ ->
  $("form").on "ajax:aborted:required", ->
    false