Comment définir un nombre minimum de caractères pour un champ de formulaire texte

Introduction

Souhaitez-vous définir un nombre minimum de caractères pour certains de vos champs de formulaire ? Dans le générateur de formulaires, vous pouvez déjà définir un nombre maximum pour ce champ en suivant cette documentation.

Cependant, en utilisant un petit extrait de code JavaScript, vous pouvez également définir un nombre minimum. Cela peut être très utile si vous souhaitez que votre champ Mot de passe ait un nombre minimum de caractères.

Dans ce tutoriel, nous allons créer un exemple de formulaire et appliquer ce nombre minimum de caractères à un champ Texte sur une seule ligne, un champ Mot de passe et un champ Texte de paragraphe.

Création de votre formulaire

Commençons par créer un nouveau formulaire. Dans notre exemple de formulaire, nous allons ajouter les champs Nom, Mot de passe et Biographie (Texte de paragraphe), qui auront tous une limite minimale de caractères définie.

Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

Ajout des classes CSS

Nous devons maintenant ajouter un nom de classe CSS à chacun des champs pour lesquels nous voulons appliquer cette limite minimale de caractères.

Dans le générateur de formulaires, sélectionnez le champ que vous souhaitez modifier. En cliquant sur Options du champ puis sur Avancé, nous pouvons ajouter notre classe CSS dans Classes CSS. La classe que vous ajouterez est wpf-char-min.

En ajoutant cette classe CSS, nous donnons à JavaScript un indicateur à rechercher afin qu'il n'exécute le script que sur les champs portant cette classe CSS.

Répétez cette étape pour chaque champ de formulaire pour lequel vous souhaitez également exiger un nombre minimum de caractères. Pour cet exemple, nous avons ajouté la classe CSS uniquement aux champs de formulaire Identifiant utilisateur, Mot de passe et Biographie.

Ajout du JavaScript

Et enfin, pour finaliser la fonctionnalité, nous devons ajouter un petit extrait de code JavaScript à notre site.

Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

Dans notre exemple ci-dessous, nous exigeons un minimum de 8 caractères pour l'Identifiant utilisateur et le Mot de passe, mais nous augmentons le minimum à 25 pour le champ Biographie.

/**
 * 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 );

Le script ci-dessus recherchera tout champ de texte ou de zone de texte portant cette classe CSS et lui appliquera le paramètre minLength. S'ils ne parviennent pas à saisir le nombre minimum de caractères, un message d'erreur de validation s'affichera sous chaque champ.

Et voilà ! Vous avez maintenant créé votre formulaire pour exiger un nombre minimum de caractères ! Souhaitez-vous définir un nombre minimum et maximum pour les cases à cocher également ? Consultez notre tutoriel sur Comment définir un nombre minimum et maximum de choix pour une case à cocher.

Articles associés

Référence d’action : wpforms_wp_footer_end