フォームフィールドから特殊文字を制限する方法

フォームの特定のフィールドに厄介な特殊文字を入力させないようにしたいと思ったことはありませんか？絵文字や記号を入力すべきでない場所に入力するユーザーにうんざりしているかもしれません。このガイドでは、JavaScript を使って、Single Line TextやParagraph などのフィールドに不要な文字を入力しないようにする方法を説明します。さあ、あなたのフォームをもう少し整然とさせましょう！

特殊文字の制限

アクションを起こす準備はできていますか？まず最初に、これらのスニペットをあなたのサイトに導入しましょう。以下に、厄介な特殊文字を止めるコードと、ユーザーがフォーム・フィールドにペーストできないようにするコードの2つを紹介する。

これらのスニペットをサイトに追加する方法がわからない場合でもご心配なく！WPFormsにカスタムPHPやJavaScriptを追加する便利なチュートリアルがあります。ステップバイステップのガイダンスをご覧ください。

/**
 * Restrict special characters from forms fields with special CSS class
 * Apply the class "wpf-char-restrict" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/
 */
 
function wpf_dev_char_restrict() {
?>
 
<script type="text/javascript">
     
    jQuery(function($){

        //Prevent any special characters in form fields with this CSS class name
        $( '.wpf-char-restrict' ).on( 'keypress', function(e){
             
			var regex = new RegExp("^[0-9a-zA-Z \b]+$");
			var key = String.fromCharCode(!event.charCode ? event.which: event.charCode);
			if (!regex.test(key)) 
				{
					alert ( "Special characters are not allowed in this field" ); // Put any message here
					event.preventDefault();
					return false;
				} 
        });
         
        //Prevent any paste features in form fields with this CSS class name
        $( '.wpf-char-restrict' ).bind( 'copy paste', function (e) {
            var regex = new RegExp( "@" );
             
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
             
            if (!regex.test(key)) {
                alert ( "Pasting feature has been disabled for this field" ); // Put any message here
                e.preventDefault();
                return false;
            }
        });
         
    });
 
</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_restrict', 10 );

最初の関数では、キーボードからの特殊文字の入力を許可しません。つ目の関数は、このフィールドへのキーボード入力やマウスクリックによる貼り付けを禁止します。

フォームの作成

次に、フォームを作成し、フォームフィールドを追加します。フォームの作成にサポートが必要な場合は、こちらのチュートリアルをご覧ください。

CSSクラスの追加

次に、制限したいフィールドを選択します。Field Optionsをクリックし、Advancedを選択します。

次に、以下を加える。 wpf-char-restrict に対する CSSクラス フィールドに追加します。 制限したいフォームフィールドごとにこのステップを繰り返します。このドキュメントの目的のために、このステップを パラグラフ そして 単一行テキスト の分野だ。

ユーザーが特殊文字を入力しようとしたり、これらのフィールドに何かを貼り付けようとすると、画面にアラートメッセージがポップアップ表示される。

この例では、ユーザーが自分のメールアドレスをコメント・フィールドに挿入しようとしているところを示しています。

JavaScriptを使って住所オートコンプリートを特定の国に制限したいですか？住所オートコンプリートを特定の国に制限する方法のチュートリアルをご覧ください。

参考アクション

wpforms_wp_footer_end