¿Desea establecer un número mínimo de opciones para su campo de formulario Checkbox? WPForms actualmente soporta limitar el número de opciones para el campo Checkbox. Sin embargo, con un fragmento personalizado, podrá establecer un número mínimo para estas opciones utilizando un pequeño fragmento de código PHP.
En este tutorial, le guiaremos a través de los pasos para configurar su campo de formulario Checkbox para que requiera un número mínimo de selecciones.
Antes de empezar, asegúrese de que WPForms está instalado y activado en su sitio WordPress y que ha verificado su licencia.
Creación del formulario
Para empezar, necesitarás crear un nuevo formulario o editar uno existente para acceder al constructor de formularios. En el constructor de formularios, asegúrate de incluir al menos un campo Checkbox en tu formulario.
Añadir el fragmento para fijar un número mínimo
Para establecer un número mínimo de opciones, tendrá que añadir este fragmento de código a su sitio. Si necesitas ayuda para añadir fragmentos de código a tu sitio, consulta 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 );
En el código anterior, cualquier casilla de verificación requerirá un mínimo de dos opciones. Si desea actualizar el número mínimo, cambie el valor en la sentencia if.
Nota: Este fragmento se aplicará al campo Casilla de verificación de todos los formularios de su sitio.
Cuando un usuario selecciona menos de dos opciones en su formulario, se mostrará un mensaje debajo del campo Casilla de verificación cuando se envíe el formulario.
Establecer un límite para formularios multipágina
Cuando se utilizan formularios multipágina, es posible que no desee esperar a que se envíe el formulario antes de mostrar el error.
Puede mostrar fácilmente un mensaje de advertencia debajo del campo Casilla de verificación cuando se hace clic en el botón Siguiente para formularios de varias páginas.
Para utilizar esta opción, simplemente añada este fragmento de código a su sitio web.
/**
* 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');
Este fragmento de código se dirigirá al ID del formulario 1000 y cuando el Siguiente el fragmento comprobará primero cuántas opciones están seleccionadas para el campo ID 10 y 9y si es inferior a dos, mostrará un mensaje de alerta en el navegador.
Preguntas frecuentes
A continuación, hemos respondido a algunas de las principales preguntas que vemos sobre cómo establecer un número mínimo de elección para el campo Casilla de verificación.
P: ¿Puedo utilizar esto sólo un formulario específico y un ID de campo específico?
R: ¡Por supuesto! Para utilizar este código en un formulario específico, utilice el siguiente fragmento 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_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 desea dirigirse a un formulario específico y a un ID de campo específico, utilice este fragmento 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 );
Nota: Si necesita ayuda para encontrar los ID de formulario y de campo, consulte este tutorial.
P: ¿Esto también puede funcionar para los campos de pago?
R: ¡Por supuesto! Para utilizarlo en el campo de formulario Payment Checkbox Items, utilice este fragmento.
/**
* 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 );
Ya está. Ahora ha aprendido cómo establecer un número mínimo de opciones en sus casillas de verificación.
A continuación, ¿le gustaría personalizar el aspecto de estas casillas de verificación? Eche un vistazo a nuestra guía sobre cómo personalizar los campos Casilla de verificación y Opción múltiple para que parezcan botones.
Relacionado
Referencias de acción: