1

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>

1 Resposta 1

2

Utilize o método normalizer dentro da regra. Esse método modifica o texto que será validado antes do plugin validar, assim você pode remover os acentos do texto. Mas para isso você precisará de uma função para remover as letras acentuadas:

function remAcentos(p){

   var acc = {
      'â': 'a', 'à': 'a', 'ã': 'a', 'â': 'a', 'á': 'a',
      'é': 'e', 'ê': 'e',
      'í': 'i',
      'ó': 'o', 'õ': 'o', 'ô': 'o',
      'ú': 'u'
   }

   return p.toLowerCase().replace(/[áàãâéêíóõôú]/g, function(m){
      return acc[m];
   });

}

$(".formulario").validate({
  rules: {
    nome: {
      required: true,
      normalizer: function( value ){
        return remAcentos(value);
      },
      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.3.1/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>

5
  • Show, muito obrigado Sam, agora para as letras maiúsculas como por exemplo "SÉrgiooooo" é só eu adicionar também nesse objeto acc? 2/01/2019 às 16:48
  • acho que não precisa... perái que vou fazer um teste
    – Sam
    2/01/2019 às 16:50
  • É só converter para minúscula com .toLowerCase()... alterei apenas a linha return p.toLowerCase().replace(/[áàãâéêíóõôú]/g,
    – Sam
    2/01/2019 às 16:55
  • 1
    Eu queria ter um filho assim.
    – user60252
    2/01/2019 às 16:59
  • 1
    Deu certo certinho, muito obrigado Sam, tu é o cara, abraços 2/01/2019 às 17:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .