Tenho um formulário onde o usuário precisa informar o nome completo dele, então usei usei o plugin jQuery Validate para fazer essas validações, e adicionei também os métodos adicionais, onde existe uma função chamada minWords que você coloca a quantidade mínima de palavras que o campo deve ter.
Configurei então o campo nome para aceitar no minimo 2 palavras e no minimo 10 caracteres. mas acontece acontece um bug, se eu entrar com o valor Sérgiooooo ele passa, ele conta os caracteres especiais como sendo uma palavra, eu busquei na internet um método adicional para resolver isso, mas o maxímo que encontrei foi uma forma para não permitir caracteres especiais.
Alguém saberia como resolver isso? creio que tem que ser criado um novo método adicional e colocar uma expressão regular para fazer isso, mas eu não sei rs.
$(".formulario").validate({
rules: {
nome: {
required: true,
minlength: 10,
minWords: 2
},
},
messages: {
nome: {
required: "Por favor, informe seu nome"
},
},
submitHandler: function(form) {
alert("enviado com sucesso");
}
});
.campo {
padding: 5px 10px;
border: solid 1px #ccc;
font-size: 16px;
color: #000000;
margin-bottom: 5px;
}
.campo.error {
border: solid 2px red;
}
.campo.valid {
border: solid 2px #28a745;
}
label.error {
display: block;
}
.btn {
margin-top: 10px;
float: left;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_pt_BR.js"></script>
<form class="formulario">
<input class="campo" type="text" name="nome" placeholder="Nome" />
<div class="btn">
<input type="submit" class="enviar" value="Enviar" />
</div>
</form>