- type="button" でエラーを出したい
Google ChromeとOperaなど reportValidity()
に対応しているブラウザの場合、それを呼ぶだけでsubmitボタンを押した時と同じUIでエラーが表示されます。
<form action=...>
<input type="button" value="送信するかも検証" onclick="this.form.reportValidity()">
reportValidity()
が使えない場合、自分のコードでエラーメッセージを出す必要があります。
<form action=...>
<input type="button" value="送信しないかも検証" onclick="report(this.form)">
<script>
function report(form) {
if (form.sampleName.validity.valid)
return;
// alert()は良いUIではないので実際はもっと良い方法で表示すべき。
alert(form.sampleName.validationMessage + form.sampleName.title);
form.sampleName.focus();
}
</script>
- 入れた瞬間にエラーメッセージ
上記と同様のことを input
イベントハンドラで実行すればよいかと思います。
reprotValidity()
がない場合の例:
<form action=...>
<input name="sampleName" oninput="report(this)" ...>
<script>
function report(input) {
if (input.validity.valid)
return;
// alert()は良いUIではないので実際はもっと良い方法で表示すべき。
alert(input.validationMessage + input.title);
input.focus();
}
</script>