Introdução
Gostaria de definir um número mínimo de caracteres para alguns dos seus campos de formulário? No criador de formulários, já pode definir um número máximo para este campo, seguindo esta documentação.
No entanto, usando um pequeno trecho de JavaScript, também é possível definir um número mínimo. Isto pode ser bastante útil se quiser definir o seu campo Palavra-passe para ter um número mínimo de caracteres.
Neste tutorial, vamos criar um formulário de exemplo e aplicar este número mínimo de caracteres a um campo de texto de uma linha, a um campo de palavra-passe e a um campo de texto de parágrafo.
Criar o seu formulário
Vamos começar por criar um novo formulário. Dentro do nosso formulário de exemplo, vamos adicionar o campo Nome, Palavra-passe e Bio (Texto de parágrafo), todos com um limite mínimo de caracteres definido.
Se precisar de ajuda para criar o seu formulário, consulte esta documentação.
Adicionar as classes CSS
Agora precisamos de adicionar um nome de classe CSS a cada um dos campos em que queremos colocar este limite mínimo de caracteres.
Dentro do construtor de formulários, selecione o campo que pretende editar. Ao clicar em Opções de campo e depois em Avançadas, podemos adicionar a nossa classe CSS às Classes CSS. A classe que vai adicionar é wpf-char-min.
Ao adicionar esta classe CSS, estamos a dar ao JavaScript um sinalizador a procurar, para que só execute o script nos campos com esta classe CSS.
Repita este passo para cada campo de formulário para o qual pretende exigir uma quantidade mínima de caracteres. Para este exemplo, apenas adicionámos a classe CSS aos campos de formulário ID de utilizador, Palavra-passe e Bio.
Adicionar o JavaScript
E, finalmente, para concluir a funcionalidade, precisamos de adicionar um pequeno fragmento de código JavaScript ao nosso site.
Se precisar de ajuda para adicionar trechos de código ao seu site, consulte este tutorial.
No exemplo abaixo, exigimos um mínimo de 8 caracteres para a ID de utilizador e a palavra-passe, mas aumentamos o mínimo para 25 no campo Biografia.
Lembre-se que se estiver a utilizar uma Máscara de entrada no campo, este trecho de código não funcionará.
/**
* Set minimum number of characters
*
* @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-characters-on-a-text-form-field/
*/
function wpf_dev_char_min() {
?>
<script type="text/javascript">
jQuery(document).ready(function ($) {
jQuery( '.wpf-char-min input' ).prop( 'minLength', 8 );
jQuery( '.wpf-char-min textarea' ).prop( 'minLength', 20 );
jQuery.extend(jQuery.validator.messages, {
minlength: jQuery.validator.format( "Please enter at least {0} characters" ),
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_min', 10 );
O atributo minLength pode ser utilizado com Texto de linha única, Website / URL, Número (não Number Slider), Palavra-passe e Texto de parágrafo. Tenha também em atenção que os browsers mais antigos podem não suportar este atributo.
O script acima procurará por qualquer campo de texto ou área de texto que tenha esta classe CSS e aplicará o minLength para a definição. Se não conseguirem introduzir o número mínimo de caracteres, é apresentada uma mensagem de erro de validação por baixo de cada campo.
E já está! Já criou o seu formulário para exigir um número mínimo de caracteres! Também gostaria de definir um número mínimo e máximo para as caixas de seleção? Dê uma vista de olhos no nosso tutorial sobre Como definir um número mínimo e máximo de opções para uma caixa de verificação.
Relacionadas
Referência da ação: wpforms_wp_footer_end