Javascript(jQuery)でHTML5のバリデーションを走らせる

Question

HTML５ではinput要素にrequireを指定することでsubmitするタイミングでバリデーションをしてくれますよね。
このバリデーションを任意のjsの関数により走らせたいのですが、何か良い策はありますでしょうか。

現状、input要素を全てループでなめて checkValidity() することでフォームに不備があるかどうかの判定はできますが、どのinput要素に不備があるか表示させるにはこちらでビューを用意する必要があります。

また、submitを onclick="return false" するとバリデーションが走る前に処理が終了してしまうようです。

簡素にHTML5の(ブラウザごとの)エラー表示を使えるのであればそれに越したことはないと思っています。
よろしくお願いします。

Answer 1

console.error(); を使えばコンソール上に任意のテキストをエラー表示させることができます。

関係ありそうな記事はこちらでしょうか。

• HTML5のValidationでsubmitボタンの状態を変更する

Comments

[kamina-zzz]

こちらも書き方が悪く説明がたりず、申し訳ありません。今回のゴールは「HTML5デフォルト機能のsubmit時に走るバリデーション機能(エラーがあればブラウザごとにフォームへの入力を求める旨が表示される)をjsにより動作させる」というものになります。

[yamato_hikawa]

主にCSSの擬似要素で実装する例ですが、参考までに。
こちらの方が簡単ではあります。擬似要素に該当する場合に、display:none から display: blockにしてエラー表示もできます。
http://unitopi.com/html5-validation-2/

[kamina-zzz]

追記をしていただきありがとうございます。う〜むやはり擬似要素ですかね…大きな手間では無いにせよ自分でCSSによるUIデザインをするということに対する抵抗感と、別ページの単純なフォームのHTML5によるバリデーションデザインとの統一感が無くなるという2点から避けていたのですが、簡便にHTML5デフォルトバリデーションを再現する方法は無さそうですね…
ありがとうございました！

Answer 2

$('#form').submit() すればバリデーションが実行されるのではないでしょうか。

Comments

[kamina-zzz]

説明が足りずすみません。今回の質問では実際にsubmitすることなくバリデーションのみを行い、エラーがある場合にはHTML5のエラーを表示したいのです。

[kodai]

フォームオブジェクト自体も checkValidity() を持ってるようなので、`$('#form').checkValidity()`でバリデーションが実行されました。

[kamina-zzz]

ありがとうございます！フォームオブジェクト自体も持っていたのですね、これで一括でバリデーションが行えました。しかしやはり(当然といえば当然かも知れませんが)HTML5の「このフィールドを入力して下さい」というあのポップアップは表示されませんね…やはりここは自作ですかね…
とにかく参考になりました。ありがとうございました。

[kodai]

Firefoxはポップアップも表示されていました。ご参考までに。
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Forms/Data_form_validation

[kamina-zzz]

ありがとうございます。 :thumbsup:

Answer 3

その後、隙間時間にちょいちょい探したところ、これだ…というものが一応見つかりましたので共有しておきます。

http://qiita.com/k-motoyan/items/75aeece8b73d5f87b3ae