名前や住所などを入力してもらうフォームにて、テキストボックスを必須項目に設定していてもスペースを1つだけ入れると、すり抜けてしまうケースがあります。
そんな時に便利な、スペースのみの入力を拒否する方法を紹介したいと思います。要は、スペースしか入れていない場合は、文字としてカウントしませんよ、という処理です。
jQueryを使ってフォームへのスペースのみの入力を拒否する方法
jQueryはすでにロードされているのが前提です。jQueryを読み込んでいない場合は、以下のようにjQueryを読み込んでください。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
スペースのみの入力を拒否するには、フォームを設置しているページの</body>の直前に以下を追加します。
<script>
$("input[name='field1']").blur(function(){
if($(this).val().match(/^[ \r\n\t]*$/)){
//スペースのみが入力された時の処理
}
});
</script>
field1にはテキストボックスのname属性を入れ、「//スペースのみが入力された時の処理」の部分に実行する処理を記述します。
例えば、スペースのみを入れて次に進もうとした時に、「スペースのみを登録することはできません」というアラートを表示させたい場合は、以下のように記述します。
<script>
$("input[name='field1']").blur(function(){
if($(this).val().match(/^[ \r\n\t]*$/)){
alert("スペースのみを登録することはできません");
}
});
</script>
このように記述することで、必須項目にスペースのみを入力して進もうとする人に警告を表示することができます。
WordPressの場合のサンプル
今回上記を実装したのは、WordPressで作成したオリジナルSNSでした。ユーザー登録にて、必須項目であってもスペースを入れれば、そのまま登録できてしまっていました。フォームはプラグインで設置しており、フォーム側は触れなかったので、上記の方法で拒否するようにしました。
ということで、備忘録としてサンプルを掲載しておきたいと思います。WordPressの場合は、jQueryの「$」を使えるようにする方法を使って実装します。
<?php if(is_page('register')): ?>
<script>
jQuery(function($) {
$("input[name='field1']").blur(function(){
if($(this).val().match(/^[ \r\n\t]*$/)){
alert("スペースのみを登録することはできません。");
}
});
});
</script>
<?php endif; ?>
ユーザー登録画面のみに設置したかったので、条件分岐も付けています。
あとがき
jQueryって色々できて便利ですね。同じようにスペースを入力することで、必須項目をすり抜けられる場合は、上記手順をぜひお試しください。非常に簡単に実装できますよ。