4

HTML5の入力要素をpatternを使えば制限できることをしりました。

<form action="sample-input.php" method="post" target="_blank">
    <p>
        <label>
            郵便番号:
            <input name="sampleName" pattern="\d{3}-\d{4}" title="郵便番号は、「123-4567」のように、「3桁の数字、ハイフン(‐)、4桁の数字」の順で入力して下さい。">
        </label>
    </p>
    <p><input type="submit" value="送信"></p>
</form>

これがtype="submit" ではなく、type="button"で発生するやり方はないのでしょうか?
もしくは、submitを押す前にtextを入力中に該当しない文字を入れた瞬間にエラーメッセージを発動することはできないのでしょうか?

1 件の回答 1

2
  • 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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。