Souhaitez-vous limiter la plage autorisée dans le champ Numbers avec WPForms ? Il y a plusieurs façons de définir des valeurs minimales et maximales pour les entrées numériques.
Ce tutoriel vous montrera les méthodes disponibles pour implémenter des limites de plage dans vos formulaires.
Mise en place du formulaire
Commençons par créer notre formulaire et y incorporer le champ Numbers. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation pour obtenir des instructions étape par étape.
Définition des limites de base de la plage
Le champ Numbers comprend des contrôles de plage dans le panneau Options du champ. Il suffit de saisir les valeurs minimale et maximale dans les champs de la plage pour limiter les entrées de l'utilisateur.
Pour plus de détails sur les fonctionnalités du champ Numbers, consultez notre guide sur l'utilisation du champ Numbers.
Mise en œuvre de contrôles de portée avancés
Pour des besoins spécifiques tels que l'application de nombres pairs ou de messages de validation personnalisés, vous pouvez utiliser JavaScript pour mettre en œuvre des contrôles de plage personnalisés. Si vous avez besoin de conseils sur l'ajout d'extraits de code, veuillez consulter 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 afin de nous assurer qu'à chaque fois qu'il y a un champ Chiffres avec cette classe particulière, ce snippet sera mis en action. Pour ajouter une classe CSS à un champ, ouvrez le générateur de formulaires, cliquez sur le bouton Chiffres pour ouvrir le Options de champ panneau. Cliquez ensuite sur Avancé et dans le Classes CSS, ajouter wpf-num-limit .
Ajout de l'extrait de code
Intégrons maintenant l'extrait.
Cet extrait particulier impose une valeur minimale de 5 et une valeur maximale de 20 pour tout Chiffres comportant une classe CSS intitulé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 se situant en dehors de la plage définie dans le code.
Limitation des nombres pairs uniquement
Pour ajouter une valeur d'échelon afin d'imposer la sélection des nombres pairs uniquement, utilisez l'extrait 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 );
Travailler avec plusieurs formulaires
Utilisez l'extrait suivant lorsque vous utilisez différentes classes CSS pour définir des plages uniques pour différents formulaires :
Dans cet exemple, nous utilisons les options 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 l'extrait de code suivant pour modifier le message d'erreur par défaut qui s'affiche lorsque les utilisateurs saisissent des nombres non valides.
/**
* 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 );
Le processus est terminé ! Vous avez réussi à définir une valeur minimale et une valeur maximale pour votre champ Numbers. Si vous souhaitez personnaliser l'indicateur de champ obligatoire, vous pouvez consulter notre article intitulé Comment modifier l'indicateur de champ obligatoire pour plus de détails.