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