Como Definir um Número Mínimo de Caracteres num Campo de Texto de Formulário

Introdução

Gostaria de definir um número mínimo de caracteres para alguns dos seus campos de formulário? Dentro do construtor de formulários, já pode definir um número máximo para este campo seguindo esta documentação.

No entanto, utilizando um pequeno trecho de JavaScript, também pode definir um número mínimo. Isto pode ser bastante útil se desejar definir o seu campo Palavra-passe para 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 Linha Única, um campo de Palavra-passe e 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 os campos Nome, Palavra-passe e Bio (Texto de Parágrafo), que terão todos um limite mínimo de caracteres definido.

Se precisar de alguma assistência na criação do 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 aos quais queremos aplicar este limite mínimo de caracteres.

Enquanto estiver no construtor de formulários, selecione o campo que deseja editar. Clicando em Opções do Campo e depois em Avançadas, podemos adicionar a nossa classe CSS a Classes CSS. A classe que irá adicionar é wpf-char-min.

Ao adicionar esta classe CSS, estamos a dar ao JavaScript um sinal para procurar, para que ele só execute o script nos campos com esta classe CSS.

Repita este passo para cada campo de formulário para o qual também deseja exigir uma quantidade mínima de caracteres. Para este exemplo, adicionámos a classe CSS apenas 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 trecho de código JavaScript ao nosso site.

Se precisar de ajuda para adicionar trechos de código ao seu site, revêja este tutorial.

No nosso exemplo abaixo, exigimos um mínimo de 8 caracteres para o ID de Utilizador e Palavra-passe, mas aumentamos o mínimo para 25 para o campo Bio.

/**
 * 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 script acima procurará qualquer campo de texto ou textarea que tenha esta classe CSS e aplicará a configuração minLength a ele. Se não inserirem o número mínimo de caracteres, verão uma mensagem de erro de validação debaixo de cada campo.

E é tudo! Criou agora o seu formulário para exigir uma quantidade mínima de caracteres! Gostaria de definir um número mínimo e máximo para caixas de seleção também? Dê uma vista de olhos ao nosso tutorial sobre Como Definir um Número Mínimo e Máximo de Escolhas para uma Caixa de Seleção.

Relacionado

Referência de Ação: wpforms_wp_footer_end