Bug when validating a word limitation field using Jquery validate

Question

I have a form where the user needs to inform the full name of it, so I used the plugin jQuery Validate to make these validations, and also added the additional methods, where there is a function called minWords that you put the minimum amount of words that the field should have.

I then set up the field name to accept at least 2 words and at least 10 characters. but happens a bug, if I enter the value Serum it passes, it counts the special characters as being a word, I searched the internet an additional method to solve this, but the maxym I found was a way not to allow special characters.

Would anyone know how to fix this? I believe that has to be created a new additional method and put a regular expression to do this, but I do not know 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>

Answer 1

Use the method Normalizer within the rule. This method modifies the text that will be validated before the plugin validates, so you can remove the accents from the text. But for this you will need a function to remove the accented letters:

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>