Comment limiter la plage autorisée dans le champ Nombres

Souhaitez-vous limiter la plage autorisée dans le champ Numéros avec WPForms ? Il existe plusieurs façons de définir des valeurs minimales et maximales pour la saisie numérique.

Ce tutoriel vous présentera les méthodes disponibles pour implémenter des limites de plage dans vos formulaires.

Configuration du formulaire

Commençons par créer notre formulaire et y intégrer le champ Numéros. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation pour des instructions étape par étape.

Configuration des limites de plage de base

Le champ Numéros inclut des contrôles de plage dans le panneau Options du champ. Entrez simplement vos valeurs minimale et maximale dans les champs Plage pour restreindre la saisie de l'utilisateur.

Pour plus de détails sur les fonctionnalités du champ Numéros, consultez notre guide sur l'utilisation du champ Numéros.

Implémentation de contrôles de plage avancés

Pour des exigences spécialisées telles que l'application de nombres pairs ou de messages de validation personnalisés, vous pouvez utiliser JavaScript pour implémenter des contrôles de plage personnalisés. Si vous avez besoin d'aide pour ajouter des extraits de code, veuillez vous référer à ce guide sur l'ajout de code personnalisé dans WordPress.

Ajout de la classe CSS

Tout d'abord, nous allons ajouter une classe CSS au champ pour nous assurer que chaque fois qu'il y a un champ Numéros avec cette classe particulière, ce snippet sera appelé. Pour ajouter une classe CSS à un champ, ouvrez le constructeur de formulaire, cliquez sur Numéros pour ouvrir le panneau Options du champ. Ensuite, cliquez sur Avancé et dans les Classes CSS, ajoutez wpf-num-limit.

Ajout de l’extrait de code

Maintenant, intégrons le snippet.

Ce snippet particulier impose une valeur minimale de 5 et une valeur maximale de 20 pour tout champ Numéros comportant une classe CSS nommée wpf-num-limit.

/**
 * Limit number range allowed for a Numbers field
 * Apply the class "wpf-num-limit" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
 */
 
function wpf_dev_num_limit() {
    ?>
    <script type="text/javascript">
        jQuery(function(){

            // Enter 5 minimum (5) and maximum (20) amount for the number field 
            jQuery( '.wpf-num-limit input' ).attr({ 'min':5, 'max':20 } ); 
        });
 
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );

Après avoir enregistré le formulaire, les utilisateurs rencontreront une erreur de validation s'ils tentent de saisir un nombre en dehors de la plage définie dans le code.

Limiter uniquement les nombres pairs

Pour ajouter une valeur de pas afin de forcer la sélection uniquement des nombres pairs, utilisez le snippet de code suivant :

/**
 * Limit number range in multiples of 2
 * Apply the class "wpf-num-limit" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
 */

function wpf_dev_num_limit() {
    ?>
    <script type="text/javascript">
        jQuery(function(){
			
			// Minimum accepted number is 20
			// Maximum accepted number is 40
			// Only accept multiples of 2
			jQuery( '.wpf-num-limit input' ).attr( { 'min':20, 'max':40, 'step': 2 }  ); 
			
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );

Utilisation avec plusieurs formulaires

Utilisez le snippet suivant lorsque vous utilisez différentes classes CSS pour définir des plages uniques pour différents formulaires :

Dans cet exemple, nous utilisons wpf-num-limit-max-under–twenty et wpf-num-limit-max-under-fifty.

/**
 * Two different CSS classes in the same function
 * Apply the class "wpf-num-limit" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
 */

function wpf_dev_num_limit() {
    ?>
    <script type="text/javascript">
        jQuery(function(){
			
			// Minimum set to 0, maximum set to 20
			jQuery( '.wpf-num-limit-max-under-twenty input' ).attr({ 'min':0, 'max':20 }); 
                        // Minimum set to 21, maximum set to 50
			jQuery( '.wpf-num-limit-max-under-fifty input' ).attr({ 'min':21, 'max':50 }); 
			
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );

Personnalisation du message d'erreur

Utilisez le snippet de code suivant pour modifier le message d'erreur par défaut qui apparaît lorsque les utilisateurs saisissent des nombres invalides.

/**
 * Limit number range allowed for a Numbers field
 * Apply the class "wpf-num-limit" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
 */

function wpf_dev_num_limit() {
    ?>
    <script type="text/javascript">
        jQuery(function(){
 
            // Minimum 5, maximum 20
            jQuery( '.wpf-num-limit input' ).attr({ 'min':5, 'max':20 } ); // Define number limits
        });
 
		// Message to be displayed if the min and or max is not met
		jQuery.extend(jQuery.validator.messages, {
            max: jQuery.validator.format( "We apologize, there can only be a max allowance of {0}." ),
            min: jQuery.validator.format( "We apologize, there needs to be a minimum allowance of {0}." )
        });
		
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );

Cela conclut le processus ! Vous avez défini avec succès une valeur minimale et maximale autorisée pour votre champ Numéros. Si vous souhaitez personnaliser l'indicateur de champ obligatoire, vous pouvez consulter notre article sur Comment changer l'indicateur de champ obligatoire pour plus de détails.

Action de référence

wpforms_wp_footer_end