Bug when validating a field with word limitation using Jquery validate

Navigation
1

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

I then set the name field to accept at least 2 words and at least 10 characters. but it happens happens a bug, if I enter with the value Sérgiooooo it passes, it counts the special characters as being a word, I searched the internet for an additional method to solve this, but the maxímo that I found was a way to not allow special characters.

Would anyone know how to solve this? I believe it 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><scriptsrc="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><scriptsrc="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>
    
asked by anonymous 02.01.2019 / 16:10

1 answer

3

Use the normalizer method within the rule. This method modifies the text that will be validated before the plugin validates, so you can remove the text accents. 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><scriptsrc="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><scriptsrc="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>
    
02.01.2019 / 17:05
XmlDocument Exception: hexadecimal value 0x1a, is an invalid character Credit system - Wordpress [closed]