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

Introduction

Souhaitez-vous fixer un nombre minimum de caractères pour certains champs de votre 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 JavaScript, vous pouvez également définir un nombre minimum. Cela peut s'avérer très utile si vous souhaitez que votre champ Mot de passe contienne 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 de texte à ligne unique, à un champ de mot de passe et à un champ de texte à paragraphe.

Création du formulaire

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

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

Ajouter les classes CSS

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

Dans le générateur de formulaires, sélectionnez le champ que vous souhaitez modifier. En cliquant sur Field Options puis sur Advanced, nous pouvons ajouter notre classe CSS aux CSS Classes. La classe que vous allez ajouter 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 dotés de cette classe CSS.

Répétez cette étape pour chaque champ de formulaire pour lequel vous souhaitez exiger un nombre minimum de caractères. Dans cet exemple, nous n'avons ajouté la classe CSS qu'aux champs de formulaire ID utilisateur, Mot de passe et Bio.

Ajouter le JavaScript

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 l'exemple ci-dessous, nous demandons un minimum de 8 caractères pour l'identifiant et le mot de passe, mais nous portons ce minimum à 25 pour le champ Bio.

/**
 * 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 texte ou textarea qui possède cette classe CSS et appliquera l'attribut minLength à celui-ci. S'ils ne saisissent pas le nombre minimum de caractères, ils verront apparaître un message d'erreur de validation sous chaque champ.

Et c'est tout ! Vous avez maintenant créé votre formulaire pour qu'il exige un nombre minimum de caractères ! Vous souhaitez également définir un nombre minimum et maximum pour les cases à cocher ? Consultez notre tutoriel sur Comment définir un nombre minimum et maximum de choix pour une case à cocher.

En rapport

Référence de l'action : wpforms_wp_footer_end