Resumo de IA
Gostaria de limitar o intervalo permitido no Campo de Números com WPForms? Existem várias formas de definir valores mínimos e máximos para a entrada numérica.
Este tutorial irá mostrar-lhe os métodos disponíveis para implementar limites de intervalo nos seus formulários.
Configuração do Formulário
Vamos começar por criar o nosso formulário e incorporar o campo Números. Se precisar de alguma orientação sobre como criar o seu formulário, consulte esta documentação para instruções passo a passo.
Configurar Limites Básicos de Intervalo
O campo Números inclui controlos de intervalo no painel Opções do Campo. Simplesmente introduza os seus valores mínimo e máximo nos campos Intervalo para restringir a entrada do utilizador.
Para mais detalhes sobre as funcionalidades do campo Números, consulte o nosso guia sobre como usar o campo Números.
Implementar Controlos Avançados de Intervalo
Para requisitos especializados, como impor números pares ou mensagens de validação personalizadas, pode usar JavaScript para implementar controlos de intervalo personalizados. Se precisar de orientação sobre como adicionar trechos de código, consulte este guia sobre como adicionar código personalizado no WordPress.
Adicionar a classe CSS
Primeiro, vamos adicionar uma classe CSS ao campo para garantir que sempre que houver um campo Números com esta classe específica, este trecho de código será acionado. Para adicionar uma classe CSS a um campo, abra o construtor de formulários, clique em Números para abrir o painel Opções do Campo. Em seguida, clique em Avançado e, em Classes CSS, adicione wpf-num-limit.
Adicionar o Excerto de Código
Agora, vamos integrar o trecho de código.
Este trecho de código específico impõe um valor mínimo de 5 e um valor máximo de 20 para qualquer campo Números que apresente uma classe CSS denominada 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 );
Após guardar o formulário, os utilizadores encontrarão um erro de validação se tentarem introduzir um número que esteja fora do intervalo definido no código.
Limitar Apenas Números Pares
Para adicionar um valor de passo para impor a seleção apenas de números pares, use o seguinte trecho 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 );
Trabalhar com Múltiplos Formulários
Use o seguinte trecho de código ao usar diferentes classes CSS para definir intervalos únicos para diferentes formulários:
Neste exemplo, estamos a usar wpf-num-limit-max-under–twenty e 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 a Mensagem de Erro
Use o seguinte trecho de código para alterar a mensagem de erro padrão que aparece quando os utilizadores inserem números invá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 );
Isto conclui o processo! Definiu com sucesso um valor mínimo e máximo permitidos para o seu campo Números. Se desejar personalizar o indicador de campo obrigatório, pode consultar o nosso artigo sobre Como Alterar o Indicador de Campo Obrigatório para mais detalhes.