Resumo de IA
Gostaria de limitar o intervalo permitido no Campo de Números com WPForms? Existem várias maneiras de definir valores mínimos e máximos para entrada numérica.
Este tutorial mostrará os métodos disponíveis para implementar limites de intervalo em seus formulários.
Configurando o Formulário
Vamos começar criando nosso formulário e incorporando o campo Números. Se precisar de alguma orientação sobre como criar seu formulário, consulte esta documentação para obter instruções passo a passo.
Configurando Limites Básicos de Intervalo
O campo Números inclui controles de intervalo no painel Opções do Campo. Simplesmente insira seus valores mínimo e máximo nos campos Intervalo para restringir a entrada do usuário.
Para mais detalhes sobre os recursos do campo Números, confira nosso guia sobre como usar o campo Números.
Implementando Controles Avançados de Intervalo
Para requisitos especializados, como impor números pares ou mensagens de validação personalizadas, você pode usar JavaScript para implementar controles 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.
Adicionando a classe CSS
Primeiro, vamos adicionar uma classe CSS ao campo para garantir que, sempre que houver um campo Números com essa classe específica, este trecho seja 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.
Adicionando o Trecho de Código
Agora, vamos integrar o trecho.
Este trecho 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 salvar o formulário, os usuários encontrarão um erro de validação se tentarem inserir um número fora do intervalo definido no código.
Limitando Apenas Números Pares
Para adicionar um valor de passo e 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 );
Trabalhando com Múltiplos Formulários
Use o seguinte trecho ao usar diferentes classes CSS para definir intervalos exclusivos para diferentes formulários:
Neste exemplo, estamos usando 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 );
Personalizando a Mensagem de Erro
Use o seguinte trecho de código para alterar a mensagem de erro padrão que aparece quando os usuários 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 );
Isso conclui o processo! Você definiu com sucesso um valor mínimo e máximo permitido para seu campo Números. Se desejar personalizar o indicador de campo obrigatório, você pode explorar nosso artigo sobre Como Alterar o Indicador de Campo Obrigatório para mais detalhes.