jQueryでフォームのsubmit処理前に任意の処理を記述したい場合、以下のように書くのだが、このコードには一つ問題がある。。
$(function(){ $('#submit-button').click(function(){ // submit前の処理 // code... $('#form').submit(); }); });
上記のコードだと、HTML側で以下のようにinputタグにrequire属性を用いたバリデーションをおこなっていた場合、バリデーションが無視されてsubmit処理が走ってしまうのだ。
<form id="form" method="POST" action=""> <input type="text" name="name" value="" required> <input type="submit" id="submit-button" value="送信"> </form>
この問題について、次のコード6~8行目を追加することで解消することができる。
$(function(){ $('#submit-button').click(function(){ // submit前の処理 // code... if(!$('#form')[0].reportValidity()) { return false; } $('#form').submit(); }); });
reportValidityメソッドは、任意のタイミングでフォーム全体の検証を行いその結果を返すメソッドで、上記のif文は検証に失敗した場合に処理を終了させることを意味している。