Volete impostare un numero minimo di scelte per il vostro campo Checkbox? WPForms attualmente supporta la limitazione del numero di scelte per il campo Checkbox. Tuttavia, con uno snippet personalizzato, sarete in grado di impostare un numero minimo di scelte utilizzando un piccolo snippet di codice PHP.
In questa esercitazione vi illustreremo i passaggi per impostare il campo del modulo Checkbox in modo che richieda un numero minimo di selezioni.
Prima di iniziare, assicuratevi che WPForms sia installato e attivato sul vostro sito WordPress e che abbiate verificato la vostra licenza.
Creazione del modulo
Per iniziare, è necessario creare un nuovo modulo o modificarne uno esistente per accedere al costruttore di moduli. Nel costruttore di moduli, assicurarsi di includere almeno un campo Checkbox nel modulo.
Aggiunta dello snippet per l'impostazione di un numero minimo
Per impostare un numero minimo di scelte, è necessario aggiungere al sito il seguente snippet di codice. Se avete bisogno di assistenza per aggiungere gli snippet di codice al vostro sito, consultate 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 precedente, qualsiasi casella di controllo richiede un minimo di due scelte. Se si desidera aggiornare il numero minimo, modificare il valore nell'istruzione if.
Nota: questo snippet si applica al campo Checkbox di tutti i moduli del sito.
Quando un utente seleziona meno di due scelte nel modulo, quando il modulo viene inviato viene visualizzato un messaggio sotto il campo Casella di controllo.
Impostazione di un limite per i moduli a più pagine
Quando si utilizzano moduli a più pagine, si potrebbe non voler attendere l'invio del modulo prima di visualizzare l'errore.
È possibile visualizzare facilmente un messaggio di avviso sotto il campo Casella di controllo quando si fa clic sul pulsante Avanti per i moduli a più pagine.
Per utilizzare questa opzione, è sufficiente aggiungere questo snippet di codice al 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-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');
Questo frammento di codice si rivolge all'ID del modulo 1000 e quando il Avanti lo snippet controllerà innanzitutto quante scelte sono state selezionate per il campo ID 10 e 9e se è inferiore a due, viene visualizzato un messaggio di avviso nel browser.
Domande frequenti
Di seguito, abbiamo risposto ad alcune delle domande più frequenti che ci vengono poste in merito all'impostazione di un numero minimo di scelte per il campo Checkbox.
D: Posso utilizzarlo solo per un modulo specifico e un ID di campo specifico?
R: Assolutamente sì! Per utilizzare questo codice in un modulo specifico, utilizzate il seguente frammento 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_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 si desidera puntare a un modulo specifico e a un ID di campo specifico, utilizzare questo frammento 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 avete bisogno di aiuto per trovare gli ID dei moduli e dei campi, consultate questa guida.
D: Può funzionare anche per i campi di pagamento?
R: Assolutamente sì! Per utilizzarlo per il campo del modulo Payment Checkbox Items, utilizzare 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 avete imparato come impostare un numero minimo di scelte per le vostre caselle di controllo.
Poi, volete personalizzare l'aspetto di queste caselle di controllo? Date un'occhiata alla nostra guida sulla personalizzazione dei campi Checkbox e Multiple Choice in modo che assomiglino a pulsanti.
Correlato
Riferimenti d'azione: