Resumen de IA
¿Te gustaría limitar el rango permitido en el Campo de Números con WPForms? Hay varias maneras de establecer valores mínimos y máximos para la entrada numérica.
Este tutorial te mostrará los métodos disponibles para implementar límites de rango en tus formularios.
Configuración del formulario
Comencemos creando nuestro formulario e incorporando el campo Números. Si necesitas alguna guía sobre cómo crear tu formulario, consulta esta documentación para obtener instrucciones paso a paso.
Configuración de Límites de Rango Básicos
El campo de Números incluye controles de rango en el panel Opciones del Campo. Simplemente introduce tus valores mínimo y máximo en los campos Rango para restringir la entrada del usuario.
Para más detalles sobre las características del campo de Números, consulta nuestra guía sobre cómo usar el campo de Números.
Implementación de Controles de Rango Avanzados
Para requisitos especializados, como forzar números pares o mensajes de validación personalizados, puedes usar JavaScript para implementar controles de rango personalizados. Si necesitas ayuda para añadir fragmentos de código, consulta esta guía sobre cómo añadir código personalizado en WordPress.
Añadir la clase CSS
Primero, vamos a añadir una clase CSS al campo para asegurarnos de que siempre que haya un campo de Números con esta clase en particular, este fragmento se active. Para añadir una clase CSS a un campo, abre el constructor de formularios, haz clic en Números para abrir el panel Opciones del Campo. Luego haz clic en Avanzado y en las Clases CSS, añade wpf-num-limit.
Añadir el fragmento de código
Ahora, integremos el fragmento.
Este fragmento en particular fuerza un valor mínimo de 5 y un valor máximo de 20 para cualquier campo de Números que presente una clase CSS etiquetada como wpf-num-limit.
/**
* Limit number range allowed for a Numbers field
* Apply the class "wpf-num-limit" to the field to enable.
*
* @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
*/
function wpf_dev_num_limit() {
?>
<script type="text/javascript">
jQuery(function(){
// Enter 5 minimum (5) and maximum (20) amount for the number field
jQuery( '.wpf-num-limit input' ).attr({ 'min':5, 'max':20 } );
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
Después de guardar el formulario, los usuarios encontrarán un error de validación si intentan introducir un número que caiga fuera del rango definido en el código.
Limitar solo números pares
Para añadir un valor de paso que fuerce la selección solo de números pares, usa el siguiente fragmento de código:
/**
* Limit number range in multiples of 2
* Apply the class "wpf-num-limit" to the field to enable.
*
* @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
*/
function wpf_dev_num_limit() {
?>
<script type="text/javascript">
jQuery(function(){
// Minimum accepted number is 20
// Maximum accepted number is 40
// Only accept multiples of 2
jQuery( '.wpf-num-limit input' ).attr( { 'min':20, 'max':40, 'step': 2 } );
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
Trabajar con Múltiples Formularios
Usa el siguiente fragmento cuando utilices diferentes clases CSS para establecer rangos únicos para diferentes formularios:
En este ejemplo, estamos usando wpf-num-limit-max-under–twenty y wpf-num-limit-max-under-fifty.
/**
* Two different CSS classes in the same function
* Apply the class "wpf-num-limit" to the field to enable.
*
* @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
*/
function wpf_dev_num_limit() {
?>
<script type="text/javascript">
jQuery(function(){
// Minimum set to 0, maximum set to 20
jQuery( '.wpf-num-limit-max-under-twenty input' ).attr({ 'min':0, 'max':20 });
// Minimum set to 21, maximum set to 50
jQuery( '.wpf-num-limit-max-under-fifty input' ).attr({ 'min':21, 'max':50 });
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
Personalizar el Mensaje de Error
Usa el siguiente fragmento de código para cambiar el mensaje de error predeterminado que aparece cuando los usuarios introducen números no válidos.
/**
* Limit number range allowed for a Numbers field
* Apply the class "wpf-num-limit" to the field to enable.
*
* @link https://wpforms.com/developers/how-to-limit-range-allowed-in-numbers-field/
*/
function wpf_dev_num_limit() {
?>
<script type="text/javascript">
jQuery(function(){
// Minimum 5, maximum 20
jQuery( '.wpf-num-limit input' ).attr({ 'min':5, 'max':20 } ); // Define number limits
});
// Message to be displayed if the min and or max is not met
jQuery.extend(jQuery.validator.messages, {
max: jQuery.validator.format( "We apologize, there can only be a max allowance of {0}." ),
min: jQuery.validator.format( "We apologize, there needs to be a minimum allowance of {0}." )
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_num_limit', 30 );
¡Eso concluye el proceso! Has establecido con éxito tanto un valor mínimo como máximo permitido para tu campo de Números. Si deseas personalizar el indicador de campo obligatorio, puedes explorar nuestro artículo sobre Cómo Cambiar el Indicador de Campo Obligatorio para más detalles.