テキストフォームフィールドに最小文字数を設定する方法

はじめに

一部のフォームフィールドに最小文字数を設定しますか？フォームビルダー内では、このドキュメントに従って、このフィールドの最大数をすでに設定できます。

ただし、簡単なJavaScriptスニペットを使用すると、最小数も設定できます。これは、パスワードフィールドを最小文字数に設定したい場合に非常に役立ちます。

このチュートリアルでは、サンプルフォームを作成し、この最小文字数を1行テキストフィールド、パスワードフィールド、および段落テキストフィールドに適用します。

フォームの作成

新しいフォームを作成することから始めましょう。サンプルフォーム内で、名前、パスワード、および自己紹介（段落テキスト）フィールドを追加します。これらすべてに最小文字数制限が設定されます。

フォームの作成についてサポートが必要な場合は、こちらのドキュメントをご覧ください。

CSSクラスの追加

次に、この最小文字数制限を適用したい各フィールドにCSSクラス名を追加する必要があります。

フォームビルダー内で、編集したいフィールドを選択します。フィールドオプションをクリックし、次に詳細設定をクリックすると、CSSクラスにCSSクラスを追加できます。追加するクラスはwpf-char-minです。

このCSSクラスを追加することで、JavaScriptに検索対象のフラグを提供し、このCSSクラスを持つフィールドでのみスクリプトを実行するようにします。

最小文字数を要求したい各フォームフィールドでこの手順を繰り返します。この例では、CSSクラスをユーザーID、パスワード、および自己紹介フォームフィールドにのみ追加しました。

JavaScriptの追加

そして最後に、機能を完了するために、サイトに小さなJavaScriptコードスニペットを追加する必要があります。

コードスニペットをサイトに追加する方法がわからない場合は、このチュートリアルを確認してください。

以下の例では、ユーザーIDとパスワードには最小8文字を要求していますが、自己紹介フィールドには最小25文字に増やしています。

/**
 * Set minimum number of characters
 *
 * @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-characters-on-a-text-form-field/
 */

function wpf_dev_char_min() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {

            jQuery( '.wpf-char-min input' ).prop( 'minLength', 8 );
            jQuery( '.wpf-char-min textarea' ).prop( 'minLength', 20 );

            jQuery.extend(jQuery.validator.messages, {
                minlength: jQuery.validator.format( "Please enter at least {0} characters" ),
            });

 });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_min', 10 );

上記のスクリプトは、このCSSクラスを持つ任意のテキストまたはtextareaフィールドを検索し、それにminLength設定を適用します。最小文字数を入力できなかった場合、各フィールドの下に検証エラーメッセージが表示されます。

これで完了です！最小文字数を要求するフォームを作成しました！チェックボックスにも最小数と最大数を設定しますか？チェックボックスの選択肢の最小数と最大数を設定する方法に関するチュートリアルをご覧ください。

関連

アクション参照: wpforms_wp_footer_end