Introdução
Gostaria de definir um número mínimo de caracteres para alguns de seus campos de formulário? Dentro do construtor de formulários, você já pode definir um número máximo para esse campo seguindo esta documentação.
Entretanto, usando um pequeno trecho de JavaScript, você também pode definir um número mínimo. Isso pode ser bastante útil se você quiser definir o campo Senha com um número mínimo de caracteres.
Neste tutorial, criaremos um formulário de exemplo e aplicaremos esse número mínimo de caracteres a um campo de texto de linha única, um campo de senha e um campo de texto de parágrafo.
Criando seu formulário
Vamos começar criando um novo formulário. Em nosso formulário de exemplo, adicionaremos os campos Name ( Nome), Password ( Senha ) e Bio (Texto do parágrafo), todos com um limite mínimo de caracteres definido.
Se precisar de ajuda para criar seu formulário, consulte esta documentação.
Adição de classes CSS
Agora precisamos adicionar um nome de classe CSS a cada um dos campos em que queremos colocar esse limite mínimo de caracteres.
Dentro do construtor de formulários, selecione o campo que deseja editar. Ao clicar em Field Options (Opções de campo ) e depois em Advanced (Avançado ), podemos adicionar nossa classe CSS às CSS Classes (Classes CSS). A classe que você adicionará é wpf-char-min.
Ao adicionar essa classe CSS, estamos fornecendo ao JavaScript um sinalizador a ser procurado para que ele execute o script somente nos campos com essa classe CSS.
Repita essa etapa para cada campo de formulário para o qual você deseja exigir um número mínimo de caracteres. Neste exemplo, adicionamos a classe CSS apenas aos campos de formulário User ID, Password e Bio.
Adição do JavaScript
E, por fim, para concluir a funcionalidade, precisamos adicionar um pequeno trecho de código JavaScript ao nosso site.
Se precisar de ajuda para adicionar trechos de código ao seu site, consulte este tutorial.
Em nosso exemplo abaixo, estamos exigindo um mínimo de 8 caracteres para a ID de usuário e a senha, mas aumentando o mínimo para 25 no campo Bio.
Lembre-se de que, se estiver usando uma Máscara de entrada no campo, esse 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 usado com texto de linha única, site/URL, número (não controle deslizante de número), senha e texto de parágrafo. Observe também que os navegadores mais antigos podem não suportar esse atributo.
O script acima procurará por qualquer campo de texto ou área de texto que tenha essa classe CSS e aplicará o minLength a ele. Se o usuário não conseguir inserir o número mínimo de caracteres, verá uma mensagem de erro de validação em cada campo.
E é isso! Agora você criou seu formulário para exigir uma quantidade mínima de caracteres! Gostaria de definir um número mínimo e máximo para as caixas de seleção também? Dê uma olhada no nosso tutorial sobre Como definir um número mínimo e máximo de opções para uma caixa de seleção.
Relacionado
Referência da ação: wpforms_wp_footer_end