Web Dragon

【HTML5】input type="text"で半角、全角スペースのみの場合、エラーが出るようにする

inputタグのpattern属性の設定

古いブラウザなどはあまり対応していないようですが、pattern属性を使えば簡単に入力制限ができます。
今回は半角、全角スペースのみの入力が送信されないようにするための設定の方法をまとめました。

DEMO

HTMLの記述方法

pattern属性には正規表現で入力制限を指定します。
また、title属性にはエラー表示テキストと一緒に表示したいテキストを設定することができます。

<p>半角、全角スペースのみ入力NG</p>
<form action="./" method="post">
<p>テキスト※必須<br>
<input type="text" name="t01" pattern=".*\S+.*" required placeholder="入力してください"></p>
<p>テキスト<br>
<input type="text" name="t02" pattern=".*\S+.*" placeholder="入力してください" title="スペースだめ"></p>
<p><input type="submit" name="s01"></p>
</form>

注意点

2019年6月現在対応していないブラウザもまだ若干ですが残っているようですので、使用する際は対応ブラウザも確認の上、使用してみてください!

対応ブラウザ確認↓
https://caniuse.com/#feat=input-pattern

参考サイト

html5 – Is it possible to configure a required field to ignore white space? – Stack Overflow
<input pattern>-HTML5タグリファレンス