More than 3 years have passed since last update.

jQueryでsubmit()するとHTML5のrequiredなどバリデーションが効かなくなる時の対処法

Last updated at 2020-02-05Posted at 2020-02-05

導入

HTML5にはrequiredやpatternなどの便利なバリデーション属性がありまして、submitするときにバリデーションしてくれるので便利です。

しかし、さまざまな事情により、javascriptやjQueryでsubmitさせる場合も多いかと思いますが、その場合、HTML5のバリデーションは無視されてしまいます。

とはいえ、実際にはHTML5のConstraint validation APIが動いており、バリデーションは機能していて、その結果を取得してあげれば、無視されずに済むようです。

まず、無視されてしまう例です。

<form>
  <input type="text" name="test" required>
</form>

{
  // これだと値が空でもPOSTされてしまう。
  $('form').submit();
}

以下が、無視されない例です。
reportValidity()でバリデーションを通ったかどうかの結果を取得できます(通過していたらtrue)。checkValidity()というメソッドや、個別のフォーム要素ごとに結果を取得することもできますが、詳しくはドキュメントを参照ください。

$('form').reportValidity()ではなく$('form')[0].reportValidity()というとこにハマりました。特定のノードを指定しないといけないということでしょうね。素のJavaScriptはまだ弱いので想像ですが。

<form>
  <input type="text" name="test" required>
</form>

{
  if (! $('form')[0].reportValidity()) {
    return false;
  }

  $('form').submit();
}

追記
個別のフォーム要素のバリデーション結果を取得する例です。いつか使うかもしれないので、記載しておきます。

$('form').find('input, select, textarea').each(function () {
  console.log($(this)[0].validity.valid);
});