Web Dragon

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

古いブラウザなどはあまり対応していないようですが、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>

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