HTML
JavaScript
HTML5
jQuery

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

More than 1 year has passed since last update.

回避策を探してもいい感じに検索できなかったので、メモ

イケていないので、もっと良い回避方法をご存知の方はコメントしていただけると幸いです


事象

タイトルの通り


詳細

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からクリックすることで発火させる必要あり。