Gostaria de definir um número mínimo de opções para o campo de formulário Checkbox? Atualmente, o WPForms suporta a limitação do número de opções para o campo Caixa de seleção. 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 orientá-lo nas etapas de configuração do 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 que você tenha verificado sua licença.
Criando o formulário
Para começar, você precisará criar um novo formulário ou editar um formulário 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.
Adição do snippet para definir um número mínimo
Para definir um número mínimo de opções, você precisará adicionar este trecho de código abaixo ao seu site. Se precisar de ajuda para adicionar trechos de código ao seu site, consulte 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 caixa de seleção 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: esse snippet será aplicado ao campo Checkbox em todos os formulários de seu site.
Quando um usuário seleciona menos de duas opções em seu formulário, uma mensagem será exibida sob o campo Checkbox quando o formulário for enviado.
Definição de um limite para formulários de várias páginas
Ao usar formulários de várias páginas, talvez você não queira aguardar o envio do formulário antes de exibir o erro.
Você pode mostrar facilmente uma mensagem de aviso sob o campo Checkbox quando o botão Next for clicado em formulários de várias páginas.
Para usar essa opção, basta adicionar este trecho de código ao seu 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');
Esse trecho de código terá como alvo o ID do formulário 1000 e quando o Próximo for clicado, o snippet verificará primeiro quantas opções estão selecionadas para o campo ID 10 e 9e, se for menor que dois, ele mostrará uma mensagem de alerta no navegador.
Perguntas frequentes
A seguir, respondemos a algumas das principais perguntas que recebemos sobre a definição de um número mínimo de opções para o campo Caixa de seleção.
P: Posso usar isso somente em um formulário específico e com uma ID de campo específica?
R: Sem dúvida! Para usar esse código em um formulário específico, use o trecho 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 trecho 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 de formulário e campo, consulte este tutorial.
P: Isso também pode funcionar para campos de pagamento?
R: Sem dúvida! Para usar isso no campo de formulário Payment Checkbox Items, 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 );
É isso aí! Agora você aprendeu a definir um número mínimo de opções em suas caixas de seleção.
Em seguida, você gostaria de personalizar a aparência dessas caixas de seleção? Dê uma olhada em nosso guia sobre como personalizar os campos Caixa de seleção e Múltipla escolha para que se pareçam com botões.
Relacionado
Referências de ações: