formのデフォルトのバリデーションを無効にする

formで使用するinputのtypeによっては、デフォルトでバリデーションのチェックが行われます。
JavaScriptでバリデーションを実装する際にデフォルトのバリデーションを無効にしたかったので、方法を調べました。

サンプルコード

バリデーション無効の対応前です。

HTML

<form action="./index.html" method="post">
	<dl>
		<dt>メールアドレス</dt>
		<dd><input type="email" name="mail"></dd>
	</dl>
	<dl>
		<dt>URL</dt>
		<dd><input type="url" name="url"></dd>
	</dl>
	<input type="submit" value="送信">
</form>

デフォルトの状態だと、入力値が正しくない場合以下のように表示されます。

バリデーション無効対応前のデモページ

サンプルコード

formにnovalidateを設定することで、デフォルトのバリデーションを無効にできます。

HTML

<form action="./index2.html" method="post" novalidate>
	<dl>
		<dt>メールアドレス</dt>
		<dd><input type="email" name="mail"></dd>
	</dl>
	<dl>
		<dt>URL</dt>
		<dd><input type="url" name="url"></dd>
	</dl>
	<input type="submit" value="送信">
</form>

バリデーション無効対応後のデモページ
　

【参考サイト】

• <input>－HTML5タグリファレンス
• HTML5/フォーム/form要素 妥当性のチェックを無効にする – TAG index Webサイト