【バリデーション】ひらがな・カタカナ｜フォームの入力形式チェックを実装する方法
ウェブサイトにおけるユーザーの入力管理は、品質を保つ上で欠かせない要素となっています。間違いや不正確な入力は後々の問題を引き起こす可能性があります。そこで今回、特にひらがな・カタカナの入力にスポットを当て、形式チェックの方法を実際のコード例を交えて解説していきます。
この記事の目次を表示
ひらがな・カタカナの形式チェック
まず初めに、HTMLのコードを用意します。今回の入力形式チェックに使用するHTMLは全て以下の通りです。
HTML
<form id="myForm">
<input type="text" id="myInput" required>
<button type="submit">送信</button>
</form>
<div id="errorMessage" style="color: red;"></div>
JavaScript、jQueryそれぞれの実装方法を解説していきます。
JavaScriptで実装する方法
ひらがな・カタカナ（全角・半角）の入力形式チェックをJavaScriptで実装する方法は以下になります。
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
var input = document.getElementById('myInput').value;
// ひらがな・カタカナ（全角・半角）の正規表現
var regex = /^[\u3040-\u309F\u30A0-\u30FFｧ-ﾝﾞﾟ]*$/;
if (regex.test(input)) {
document.getElementById('errorMessage').textContent = '';
this.submit();
} else {
document.getElementById('errorMessage').textContent = 'ひらがな・カタカナ（全角・半角）のみを入力してください。';
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
document.getElementById('myForm').addEventListener('submit', function(event) { ... }); この部分では、IDがmyFormの要素（フォーム）の送信イベントに関数を関連付けています。
event.preventDefault(); はフォームのデフォルトの送信動作をキャンセルする命令です。
var input = document.getElementById('myInput').value; ここでユーザーの入力値を取得しています。
var regex = /^[\u3040-\u309F\u30A0-\u30FFｧ-ﾝﾞﾟ]*$/; この正規表現はひらがな・カタカナ（全角・半角）をチェックするためのものです。
if (regex.test(input)) { ... } else { ... } この条件文で、入力が正規表現に一致するかをチェックしています。
入力内容に問題が無ければthis.submit(); でフォームを送信します。
jQueryで実装する方法
ひらがな・カタカナ（全角・半角） の入力形式チェックをjQueryで実装する方法は以下になります。
$('#myForm').on('submit', function(event) {
event.preventDefault();
var input = $('#myInput').val();
// ひらがな・カタカナ（全角・半角）の正規表現
var regex = /^[\u3040-\u309F\u30A0-\u30FFｧ-ﾝﾞﾟ]*$/;
if (regex.test(input)) {
$('#errorMessage').text('');
this.submit();
} else {
$('#errorMessage').text('ひらがな・カタカナ（全角・半角）のみを入力してください。');
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
$('#myForm').on('submit', function(event) { ... }); この部分では、IDがmyFormの要素の送信イベントに関数を関連付けています。
jQueryの event.preventDefault(); は、JavaScriptのものと同様に、フォームのデフォルトの送信動作をキャンセルします。
var input = $('#myInput').val(); このコードでユーザーの入力値を取得していますが、jQueryの文法を使用している点がJavaScriptのそれと異なります。
var regex = /^[\u3040-\u309F\u30A0-\u30FFｧ-ﾝﾞﾟ]*$/; は、前述のJavaScriptの部分と同じ正規表現を定義しています。
前述のJavaScriptと同様に、if (regex.test(input)) { ... } else { ... } で入力値のチェックを行い、一致すればフォームを送信し、不一致の場合はエラーメッセージを表示します。
その他のパターン
正規表現は非常に強力なツールであり、わずかな書き換えによって様々な文字列のパターンをチェックすることができます。具体的には、以下のコード部分が核心となります。
// ひらがな・カタカナ（全角・半角）の正規表現
var regex = /^[\u3040-\u309F\u30A0-\u30FFｧ-ﾝﾞﾟ]*$/;
この正規表現は現在、ひらがなとカタカナ（全角・半角）の形式チェックに対応していますが、範囲やパターンを調整することで、異なる条件のチェックにも応用することが可能です。JavaScript・jQueryを利用する際、この部分の正規表現を適切にカスタマイズすることで、幅広い文字列形式の検証に対応することが出来ます。
ひらがな（全角）・カタカナ（全角・半角）
var regex = /^[\u3040-\u309F\u30A0-\u30FFｧ-ﾝﾞﾟ]*$/
ひらがな（全角）・カタカナ（全角）
var regex = /^[\u3040-\u309F\u30A0-\u30FF]*$/
ひらがな（全角）・カタカナ（半角）
var regex = /^[\u3040-\u309Fｧ-ﾝﾞﾟ]*$/
ひらがな（全角）
var regex = /^[\u3040-\u309F]*$/
カタカナ（全角・半角）
var regex = /^[\u30A0-\u30FFｧ-ﾝﾞﾟ]*$/
カタカナ（全角）
var regex = /^[\u30A0-\u30FF]*$/
カタカナ（半角）
var regex = /^[ｧ-ﾝﾞﾟ]*$/
その他のバリデーションチェック
フォームを構築する際、バリデーションチェックするその他プログラムコードについては、別の記事で詳しく取り上げています。詳細はそちらを参照してみてください。
まとめ
この記事を通じて、入力形式のチェックの基本とその重要性について触れてきました。特に平仮名とカタカナの入力に特化してのアプローチは、多くのウェブサイト制作で役立つと思います。適切な入力チェックはユーザーエクスペリエンスの向上にも寄与します。実際の開発にこの知識を活かし、更なる向上を目指してみてください。
