LoginSignup
12
7

More than 5 years have passed since last update.

jQueryからsubmitするとHTML5 requiredが効かなくなる

Posted at

回避策を探してもいい感じに検索できなかったので、メモ
イケていないので、もっと良い回避方法をご存知の方はコメントしていただけると幸いです

事象

タイトルの通り

詳細

HTML5のrequired簡単なバリデーションならしてくれる。うれしい。
ただ噂ではSafariでは言うこと聞いてくれないらしいから注意。

HTML required Attribute
こんな感じで使う。
submitされる直前にチェックしてくれる」がポイント。

このrequiredは困ったことにjQuerysubmit()を使うと、バリデーションされずにsubmitされてしまう。
なんとかそれを回避したい。

解決方法

ボタン
<input type="button" class="btn btn-primary" value="登録" name="regist" onclick="doPost();">
<input type="submit" value="不可視ボタン"  style="display:none" name=submitBtn>

doPost()
function doPost(){

    // $('#form').submit(); <- これだとrequiredが効かない NG

    // HTMLのtype=submitのボタンをjsからクリック
    $("input[name=submitBtn]").click();
}

イケてなさすぎて笑われたので、使うときは要注意

参考

jQueryのsubmitでrequiredが効かない
html5のrequiredはJSからsubmit()を呼んだ時には効かない。ので不可視のsubmitボタンを埋め込んどいてJSからクリックすることで発火させる必要あり。

12
7
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
7