HTML textareaの入力チェックについて

Question

HTMLのform入力制限で英数文字の入力で制限をしたいと思っております。

以下の「input type="text」では思い通りに英数文字の制限はできました

<input type="text"　name="comment"  pattern="[^\x20-\x7E]*" required>

複数行の入力が必要なので以下の「textarea」にしたところ「pattern」が効いていないようで入力された英数文字が通ってしまいます。

<textarea name="comment" pattern="[^\x20-\x7E]*" required></textarea>

「input type="text"」と「textarea 」では使い方に違いがあるのかわかりません

色々調べたのですが解決できず困っております
よろしくお願いいたします。

Answer 1

textareaにpatternはないのでカスタムデータなどで代用してみてください

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.addEventListener('submit',e=>{
    e.target.querySelectorAll('textarea[data-pattern]').forEach(x=>{
      if(!new RegExp(`^${x.dataset["pattern"]}+$`).test(x.value)){
        e.preventDefault();
      }
    });
  });
});
</script>
<form>
<textarea name="ta" data-pattern="[^a-zA-Z0-9]" required></textarea>
<input type="submit" value="send">
</form>

Comments

[efu_akio]

ありがとうございます！！

Answer 2

色々調べたのですが解決できず困っております

<textarea>に関するMDNを見れば一目瞭然で、pattern属性は存在しません。

Comments

[efu_akio]

リンクしていただいてるサイト見ました
pattern属性は存在しないんですね
ありがとうございました

Javascript で再度組みなおしてみます。