Souhaitez-vous fixer un nombre minimum de choix pour votre champ de formulaire Checkbox? WPForms supporte actuellement la limitation du nombre de choix pour le champ Checkbox. Cependant, avec un extrait de code personnalisé, vous serez en mesure de définir un nombre minimum pour ces choix en utilisant un petit extrait de code PHP.
Dans ce tutoriel, nous allons vous expliquer comment configurer votre champ de formulaire à cases à cocher pour qu'il exige un nombre minimum de sélections.
Avant de commencer, assurez-vous que WPForms est installé et activé sur votre site WordPress et que vous avez vérifié votre licence.
Création du formulaire
Pour commencer, vous devez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au générateur de formulaires. Dans le générateur de formulaires, assurez-vous d'inclure au moins un champ de type case à cocher dans votre formulaire.
Ajout de l'extrait permettant de fixer un nombre minimum
Pour définir un nombre minimum de choix, vous devez ajouter l'extrait de code ci-dessous à votre site. Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.
/**
* Set minimum number of choices for a checkbox for the field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox/
*/
function wpf_checkbox_validation( $field_id, $field_submit, $form_data ) {
$field_submit = (array) $field_submit;
// Make sure we have an array of choices and count the number of choices.
$count_choices = is_array( $field_submit ) ? count( $field_submit ) : 0;
if ( $count_choices < 2 ) {
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Please select at least 2 options', 'your-text-domain' );
}
}
add_action( 'wpforms_process_validate_checkbox', 'wpf_checkbox_validation', 10, 3 );
Dans le code ci-dessus, toute case à cocher doit comporter au moins deux choix. Si vous souhaitez mettre à jour le nombre minimum, modifiez la valeur dans l'instruction if.
Remarque : ce snippet s'applique au champ Checkbox de tous les formulaires de votre site.
Lorsqu'un utilisateur sélectionne moins de deux choix dans votre formulaire, un message s'affiche sous le champ de la case à cocher lors de l'envoi du formulaire.
Fixer une limite pour les formulaires multipages
Lors de l'utilisation de formulaires multipages, il se peut que vous ne souhaitiez pas attendre la soumission du formulaire avant d'afficher l'erreur.
Vous pouvez facilement afficher un message d'avertissement sous le champ Case à cocher lorsque vous cliquez sur le bouton Suivant pour les formulaires multipages.
Pour utiliser cette option, il suffit d'ajouter cet extrait de code à votre site.
/**
* Set minimum number of choices for a checkbox form field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox-field/
*/
function wpf_dev_min_checkbox() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var checkbox_forms = [
{form_id: 1000, min_count: 2, field_ids: [10,9]},
];
$('[id^=wpforms-] input[type=checkbox]').on('click', function(e){
var this_form_id = $(this).closest('form').data("formid");
var checkbox_form_ids = checkbox_forms.map(form => form.form_id);
if (checkbox_form_ids.includes(this_form_id)){
var checkbox_container = $(this).closest(".wpforms-field-checkbox");
var checkbox_container_field_id = checkbox_container.data("field-id");
checkbox_forms.forEach(function(form) {
if (this_form_id == form.form_id){
var min_value = form.min_count;
var field_ids_array = form.field_ids;
if (field_ids_array.includes(checkbox_container_field_id)){
validate_checkbox_min(e, checkbox_container, min_value);
}
}
});
}
});
function validate_checkbox_min(e, checkbox_container, min){
var minMaxSelection = checkbox_container.find('input[type=checkbox]:checked');
var this_field = $('[id^=wpforms-' + checkbox_container.data("field-id") + '-field_' + checkbox_container.data("field-id") + '-container]');
var warning_id = 'wpforms-' + checkbox_container.data("field-id") + '-warning';
$("#" + warning_id).remove();
if (minMaxSelection.length > 0 && minMaxSelection.length < min) {
e.stopPropagation();
this_field.addClass("wpforms-error");
this_field.removeClass("wpforms-valid");
this_field.attr('aria-invalid', 'true');
checkbox_container.addClass("wpforms-has-error");
checkbox_container.append('<em id="' + warning_id + '" class="wpforms-error" role="alert" aria-label="Error message" for="">Please select at least ' + min + ' options</em>');
} else {
this_field.removeClass("wpforms-error");
this_field.addClass("wpforms-valid");
this_field.attr('aria-invalid', 'false');
checkbox_container.removeClass("wpforms-has-error");
}
}
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_min_checkbox');
Cet extrait de code ciblera l'ID du formulaire 1000 et lorsque le Suivant est cliqué, le snippet vérifie d'abord combien de choix sont sélectionnés pour le champ ID 10 et 9et s'il est inférieur à deux, il affichera un message d'alerte dans le navigateur.
Questions fréquemment posées
Nous avons répondu ci-dessous à quelques-unes des questions les plus fréquentes concernant la définition d'un nombre minimum de choix pour le champ Case à cocher.
Q : Puis-je l'utiliser uniquement pour un formulaire spécifique et un champ d'identification spécifique ?
R : Absolument ! Pour utiliser ce code sur un formulaire spécifique, utilisez l'extrait de code ci-dessous :
/**
* Set minimum number of choices for a checkbox form field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox/
*/
function wpf_dev_checkbox_validation( $field_id, $field_submit, $form_data ) {
// Change the number to match your form ID
if ( absint( $form_data[ 'id' ] ) !== 1289 ) {
return;
}
$field_submit = (array) $field_submit;
// Make sure we have an array of choices and count the number of choices.
$count_choices = is_array( $field_submit ) ? count( $field_submit ) : 0;
if ( $count_choices < 2 ) {
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Please select at least 2 options', 'your-text-domain' );
}
}
add_action( 'wpforms_process_validate_checkbox', 'wpf_dev_checkbox_validation', 10, 3 );
Si vous souhaitez cibler un formulaire spécifique et un identifiant de champ spécifique, utilisez cet extrait de code.
/**
* Set minimum number of choices for a checkbox form field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox/
*/
function wpf_dev_checkbox_validation( $field_id, $field_submit, $form_data ) {
// Change the number to match your form ID
if ( absint( $form_data[ 'id' ] ) !== 1289 ) {
return $field_id;
}
// Change this number to match the field ID
if (absint($field_id) === 15 ) {
$field_submit = (array) $field_submit;
// Make sure we have an array of choices and count the number of choices.
$count_choices = is_array( $field_submit ) ? count( $field_submit ) : 0;
if ( $count_choices < 2 ) {
wpforms()->process->errors[ $form_data[ 'id' ] ][ $field_id ] = esc_html__( 'Please select at least 2 options', 'your-text-domain' );
}
}
}
add_action( 'wpforms_process_validate_checkbox', 'wpf_dev_checkbox_validation', 10, 3 );
Note : Si vous avez besoin d'aide pour trouver les identifiants des formulaires et des champs, veuillez consulter ce tutoriel.
Q : Cela peut-il également fonctionner pour les champs de paiement ?
R : Absolument ! Pour l'utiliser dans le champ de formulaire Éléments de la case à cocher Paiement, utilisez ce snippet.
/**
* Set minimum number of choices for a payment checkbox form field
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-choices-for-a-checkbox/
*/
function wpf_dev_limit_payment_field( $field_id, $field_submit, $form_data ) {
$form_id = 731; // Limit to form ID: Use 0 to target all forms
$fieldID = 21; // Limit to field ID: Use 0 to target all checkbox fields
$min = 2; // Change the minimum amount
$max = 5; // Change the maximum amount
// Limit to specific form if {$form_id} is set
if ( absint( $form_data[ 'id' ] ) !== $form_id && !empty( $form_id ) ) {
return;
}
// Limit to specific field ID if {$fieldID} is set
if ( absint( $field_id ) !== $fieldID && !empty( $fieldID ) ) {
return;
}
// Make sure we have an array of choices and count the number of choices.
$count = is_array( $field_submit ) ? count( $field_submit ) : 0;
// Process error if choices count is less than {$min} or greater than {$max}
if( count( $field_submit ) < $min ) {
wpforms()->process->errors[ $form_data[ 'id' ] ] [ $field_id ] = esc_html__( 'Please select a minimum of ' . $min .' choices.', 'your-text-domain' );
} elseif ( count( $field_submit ) > $max ) {
wpforms()->process->errors[ $form_data[ 'id' ] ] [ $field_id ] = esc_html__( 'Please select a maximum of ' . $max . ' choices.', 'your-text-domain' );
}
}
add_action( 'wpforms_process_validate_payment-checkbox', 'wpf_dev_limit_payment_field', 10, 3 );
Voilà, c'est fait ! Vous avez maintenant appris à définir un nombre minimum de choix pour vos cases à cocher.
Vous souhaitez ensuite personnaliser l'aspect de ces cases à cocher ? Consultez notre guide sur la personnalisation des cases à cocher et des champs à choix multiples pour qu'ils ressemblent à des boutons.
En rapport
Références d'action :