Resumo de IA
Introdução
Gostaria de definir um número mínimo de caracteres para alguns dos seus campos do formulário? Dentro do construtor de formulários, você já pode definir um número máximo para este campo seguindo esta documentação.
No entanto, 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 seu campo de Senha com 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 Senha e um campo de Texto de Parágrafo.
Criando seu formulário
Vamos começar criando um novo formulário. Dentro do nosso formulário de exemplo, adicionaremos os campos Nome, Senha e Bio (Texto de Parágrafo), que terão um limite mínimo de caracteres definido.
Se precisar de ajuda para criar seu formulário, consulte esta documentação.
Adicionando as classes CSS
Agora precisamos adicionar um nome de classe CSS a cada um dos campos nos quais queremos aplicar este limite mínimo de caracteres.
Dentro do construtor de formulários, selecione o campo que deseja editar. Clicando em Opções do Campo e depois em Avançado, podemos adicionar nossa classe CSS em Classes CSS. A classe que você adicionará é wpf-char-min.
Ao adicionar esta classe CSS, estamos dando ao JavaScript um sinal para procurar, para que ele execute o script apenas nos campos com esta classe CSS.
Repita esta etapa para cada campo do formulário em que você também deseja exigir uma quantidade mínima de caracteres. Para este exemplo, adicionamos a classe CSS apenas aos campos do formulário ID de Usuário, Senha e Bio.
Adicionando o JavaScript
E, finalmente, 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, revise este tutorial.
Em nosso exemplo abaixo, exigimos um mínimo de 8 caracteres para o ID de Usuário e Senha, mas aumentamos o mínimo para 25 para o campo Bio.
Lembre-se de que, se você estiver usando 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 usado com Texto de Linha Única, Site / URL, Número (não Slider de Número), Senha e Texto de Parágrafo. Observe também que navegadores mais antigos podem não suportar este atributo.
O script acima procurará qualquer campo de texto ou textarea que tenha esta classe CSS e aplicará a configuração minLength a ele. Se eles não inserirem o número mínimo de caracteres, verão uma mensagem de erro de validação abaixo de cada campo.
E é isso! Você criou seu formulário para exigir um número mínimo de caracteres! Gostaria de definir um número mínimo e máximo para caixas de seleção também? Dê uma olhada em 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 de Ação: wpforms_wp_footer_end