フォームにカナ制限を設ける

はじめに

フォーム入力にカタカナのみを許可する方法です。
inputタグにpattern属性がHTML5から追加されたようですが、
対応されていないブラウザもまだまだあるようなので、
今回はjQueryライブラリを使って実装します。

使用するもの

デモ

See the Pen jQuery-Form-Validatorでカナ制限 by No Name (@sume44) on CodePen.0

説明

jQuery Form Validatorには様々なバリデーション機能があります。
カナ入力のみ許可する場合は、data-validation属性にcustomを設定し、
data-validation-regexp属性に正規表現でカタカナの範囲を指定します。

これだけであとの処理はすべてjQuery Form Validatorがやってくれます。
非常に便利ですね 🙂