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

事象

タイトルの通り

詳細

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

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.