jQueryのsubmitでrequiredが効かない

  • このエントリーをはてなブックマークに追加
  • Pocket

2重submit防止などでjQueryからsubmit()している場合にHTML5のrequiredが動かないことへの対策方法。

確認環境

  • Mac OS X 10.11.1
  • jQuery 2.2.0

safariはそもそもrequiredが動かないのでね…

ブラウザ  結果
Google Chrome
Fire Fox
Safari  

requiredが働かない

こんなHTMLがあったとする。

最後の行でjQuery.submit()している。
この時にinput[name=”foo”]が空で送信された場合は以下のようになる。

期待していること
「このフィールドを入力してください」という旨のツールチップが表示される

現実
普通に送信される

orz

要素を見る限りではinvalidが付与されているのでrequiredは確かに働いているっぽいが…
どうもjQuery.submit()だと止まらずに送信されてしまう模様。

jQuery.submit()でもrequireを動かす

jQueryでsubmitしなければ望み通りに動くので、要素にinvalidがあるかどうかを探す処理を入れる。

これだけだとsafariでは動かないが、とりあえず期待している挙動になった。

どうせサーバサイドでもバリデーションするし、お手軽に実装できるHTML5のrequiredなんだけど
やっぱり何かプラグインを使ったほうがいいのかなー

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*