Riassunto AI
Desideri impostare un numero minimo di scelte per il tuo campo modulo Casella di controllo? WPForms supporta attualmente la limitazione del numero di scelte per il campo Casella di controllo. Tuttavia, con uno snippet personalizzato, sarai in grado di impostare un numero minimo per queste scelte utilizzando un piccolo snippet di codice PHP.
In questo tutorial, ti guideremo attraverso i passaggi per configurare il tuo campo modulo Casella di controllo per richiedere un numero minimo di selezioni.
Prima di iniziare, assicurati che WPForms sia installato e attivato sul tuo sito WordPress e che tu abbia verificato la tua licenza.
Creazione del modulo
Per iniziare, dovrai creare un nuovo modulo o modificare uno esistente per accedere al generatore di moduli. Nel generatore di moduli, assicurati di includere almeno un campo Casella di controllo nel tuo modulo.
Aggiunta dello snippet per impostare un numero minimo
Per impostare un numero minimo di scelte, dovrai aggiungere questo snippet di codice al tuo sito. Se hai bisogno di assistenza nell'aggiunta di snippet di codice al tuo sito, consulta questo tutorial.
/**
* 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 );
Nel codice sopra, qualsiasi casella di controllo richiederà un minimo di due scelte. Se desideri aggiornare il numero minimo, cambia il valore nell'istruzione if.
Nota: Questo snippet si applicherà al campo Casella di controllo su tutti i moduli del tuo sito.
Quando un utente seleziona meno di due scelte sul tuo modulo, verrà visualizzato un messaggio sotto il campo Casella di controllo al momento dell'invio del modulo.
Impostazione di un limite per i moduli multipagina
Quando si utilizzano moduli multipagina, potresti non voler attendere l'invio del modulo prima di visualizzare l'errore.
Puoi facilmente mostrare un messaggio di avviso sotto il campo Casella di controllo quando viene fatto clic sul pulsante Avanti per i moduli multipagina.
Per utilizzare questa opzione, aggiungi semplicemente questo snippet di codice al tuo sito.
/**
* 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_min_checkbox() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var checkbox_forms = [
/* ##### Impostare form e campi ##### */
{form_id: 348, min_count: 2, field_ids: [171]},
{form_id: 348, min_count: 3, field_ids: [173]},
{form_id: 546, min_count: 4, field_ids: [363]},
{form_id: 631, min_count: 4, field_ids: [363]},
{form_id: 1138, min_count: 4, field_ids: [1]},
];
// Live feedback on checkbox click
$(document).on('click', '[id^=wpforms-] input[type=checkbox]', function() {
var $form = $(this).closest('form');
var this_form_id = $form.data('formid');
var $container = $(this).closest('.wpforms-field-checkbox');
var field_id = $container.data('field-id');
checkbox_forms.forEach(function(cfg) {
if (this_form_id == cfg.form_id && cfg.field_ids.includes(field_id)) {
validate_checkbox_min($container, cfg.min_count);
}
});
});
// Block Next page if validation fails
$(document).on('wpformsBeforePageChange', function(event, nextPage, $form, direction) {
if (direction !== 'next') {
return;
}
var this_form_id = $form.data('formid');
var currentPage = nextPage - 1;
var is_valid = true;
checkbox_forms.forEach(function(cfg) {
if (this_form_id != cfg.form_id) {
return;
}
cfg.field_ids.forEach(function(field_id) {
var $container = $form.find('.wpforms-field-checkbox[data-field-id="' + field_id + '"]');
if (!$container.length) {
return;
}
var field_page = $container.closest('.wpforms-page').data('page');
if (field_page != currentPage) {
return;
}
if (!validate_checkbox_min($container, cfg.min_count)) {
is_valid = false;
}
});
});
if (!is_valid) {
event.preventDefault();
}
});
function validate_checkbox_min($container, min) {
var checked = $container.find('input[type=checkbox]:checked');
var form_id = $container.closest('form').data('formid');
var field_id = $container.data('field-id');
var warn_id = 'wpforms-' + form_id + '-field-' + field_id + '-min-warn';
$('#' + warn_id).remove();
if (checked.length > 0 && checked.length < min) {
$container.addClass('wpforms-has-error');
$container.append(
'<em id="' + warn_id + '" class="wpforms-error" role="alert" aria-label="Error message">' +
'Si prega di spuntare tutte le ' + min + ' caselle</em>'
);
return false;
}
$container.removeClass('wpforms-has-error');
return true;
}
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_min_checkbox');
Domande frequenti
Di seguito, abbiamo risposto ad alcune delle domande più frequenti sull'impostazione di un numero minimo di scelte per il campo Casella di controllo.
D: Posso usarlo solo per un modulo specifico e un ID campo specifico?
R: Assolutamente! Per utilizzare questo codice su un modulo specifico, usa questo snippet di codice qui sotto:
/**
* 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 );
Se desideri specificare un modulo specifico e un ID campo specifico, usa questo snippet di codice.
/**
* 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 );
Nota: Se hai bisogno di aiuto per trovare gli ID dei tuoi moduli e campi, consulta questo tutorial.
D: Può funzionare anche per i campi di pagamento?
R: Assolutamente! Per utilizzarlo per il campo modulo Elementi Casella di controllo Pagamento, usa questo 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 );
Ecco fatto! Ora hai imparato come impostare un numero minimo di scelte nelle tue caselle di controllo.
Successivamente, desideri personalizzare l'aspetto di queste caselle di controllo? Dai un'occhiata alla nostra guida su come personalizzare i campi Casella di controllo e Scelta multipla per farli sembrare pulsanti.
Correlati
Riferimenti azione: