

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

[code]

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

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


CC BY-SA 3.0
2016-11-17T02:40:12.180
30466
2016-11-18T02:15:07.443
19590
question
html5
HTML5のpattern要素の発生タイミングについて


  * type="button" でエラーを出したい

Google ChromeとOperaなど `reportValidity()`
に対応しているブラウザの場合、それを呼ぶだけでsubmitボタンを押した時と同じUIでエラーが表示されます。

[code]

    <form action=...>
      <input type="button" value="検証" onclick="this.form.reportValidity()">
    
[/code]

`reportValidity()` が使えない場合、自分のコードでエラーメッセージを出す必要があります。

[code]

    <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>
    
[/code]

  * 入れた瞬間にエラーメッセージ

上記と同様のことを `input` イベントハンドラで実行すればよいかと思います。  
`reprotValidity()` がない場合の例:

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2016-11-17T04:48:13.230
30472
2016-11-18T02:15:07.443
2016-11-18T02:15:07.443
3475
3475
30466
answer