Resumo de IA
Gostaria de definir um número mínimo de opções para o seu campo de formulário Checkbox? O WPForms atualmente suporta a limitação do número de opções para o campo Checkbox. No entanto, com um snippet personalizado, você poderá definir um número mínimo para essas opções usando um pequeno trecho de código PHP.
Neste tutorial, vamos guiá-lo através das etapas para configurar seu campo de formulário Checkbox para exigir um número mínimo de seleções.
Antes de começar, certifique-se de que o WPForms esteja instalado e ativado em seu site WordPress e de que você tenha verificado sua licença.
Criação do Formulário
Para começar, você precisará criar um novo formulário ou editar um existente para acessar o construtor de formulários. No construtor de formulários, certifique-se de incluir pelo menos um campo Checkbox em seu formulário.
Adicionando o Snippet para Definir um Número Mínimo
Para definir um número mínimo de opções, você precisará adicionar este snippet de código abaixo ao seu site. Se precisar de alguma assistência para adicionar snippets de código ao seu site, por favor revise este 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 );
No código acima, qualquer checkbox exigirá um mínimo de duas opções. Se você quiser atualizar o número mínimo, altere o valor na instrução if.
Observação: Este snippet será aplicado ao campo Checkbox em todos os formulários do seu site.
Quando um usuário seleciona menos de duas opções em seu formulário, uma mensagem será exibida abaixo do campo Checkbox quando o formulário for enviado.
Definindo um Limite para Formulários de Várias Páginas
Ao usar formulários de várias páginas, você pode não querer esperar pelo envio do formulário antes de exibir o erro.
Você pode facilmente exibir uma mensagem de aviso abaixo do campo Checkbox quando o botão Próximo for clicado para formulários de várias páginas.
Para usar esta opção, basta adicionar este snippet de código ao seu site em vez disso.
/**
* 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');
Perguntas Frequentes
Abaixo, respondemos a algumas das principais perguntas que vemos sobre a definição de um número mínimo de opções para o campo Checkbox.
P: Posso usar isso apenas em um formulário específico e um ID de campo específico?
R: Com certeza! Para usar este código em um formulário específico, use este snippet de código abaixo:
/**
* 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 você quiser direcionar um formulário específico e um ID de campo específico, use este snippet de código.
/**
* 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 );
Observação: Se precisar de ajuda para encontrar os IDs do seu formulário e campo, por favor, revise este tutorial.
P: Isso pode funcionar para campos de pagamento também?
R: Com certeza! Para usar isso para o campo de formulário Itens de Pagamento por Checkbox, use este 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 );
Pronto! Agora você aprendeu como definir um número mínimo de opções em seus checkboxes.
Em seguida, você gostaria de personalizar a aparência desses checkboxes? Dê uma olhada em nosso guia sobre personalizar os campos Checkbox e Múltipla Escolha para parecerem botões.
Relacionado
Referências de ação: