Validate different fields with different regex

Asked

Viewed 530 times

2

function validaForm(){
  function valida_nome (){
  var filter = /^([a-zA-Zà-úÀ-Ú0-9]|-|_|\s)+$/ ;
  if(!filter.test(document.getElementById("nome").value)){
  document.getElementById("nome").placeholder = "Insira o Nome corretamente";
  form1.nome.focus();
  return false;
  }
  }
  function valida_email (){
  var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
  if(!filter.test(document.getElementById("email").value)){
  document.getElementById("email").placeholder = "Insira o email corretamente";
  form1.email.focus();
  return false;
  }
  }
  function valida_telefone (){
  var filter =/^[0-9]{1,}$/;
  if(!filter.test(document.getElementById("telefone").value)){
  document.getElementById("telefone").placeholder = "Insira o telefone corretamente";
  form1.telefone.focus();
  return false;
  }
  }
 }
  
<form name="form1" action="#" method="post">
  Nome<input id="nome" type="text" name="nome"><br/>
  Email<input id="email" type="text" name="email"><br/>
  Telefone<input id="telefone" type="text" name="telefone"><br/>
  <input type="submit" value="testar" onclick="return validaForm()¨">
  </form>
How to validate these fields, so that if the user enters unsuitable characters, the message appears ? No Jquery, HTML5 and no Ajax ? Javascript only. It is possible ?

javascript

  • What is the difficulty you’re facing?

  • @War the code doesn’t work, and I can’t find the mistake. But the idea is if the user insert letters for example in the phone field would like the message to appear in the placeholder.

2 answers

2


The HTML5 tag has gained the attribute "Pattern" to insert a regular expression to be compared with the user input.

<form name="form1" action="#" method="post">
   Telefone: <input id="telefone" type="text" pattern="[0-9]{8}" name="telefone"><br>
   <input type="submit">
</form>

In that case, the [0-9] of the regular expression pro phone means that only numbers from 0 to 9 can be entered and the second part {8} means that 8 values can be entered.

For other types of regular expressions, I advise you to take a look at http://www.w3schools.com/jsref/jsref_obj_regexp.asp

Without HTML5

Without HTML5, the solution I think is to check each field each time the field text changes. Example:

var telefone = document.getElementById('telefone');
telefone.addEventListener('keyup', function(){
    var tel = telefone.value;
    var filter = /^[0-9]{1,}$/;
    if(!filter.test(tel)){
        telefone.value = tel.substring(1,-1);
    }
});

This way, you do not allow unauthorized characters to be inserted.

  • If you want to leave some message in the placeholder, HTML5 also has the "placeholder" attribute, which you can set the message that will appear

  • Domas I’m boring, I forgot to put without being HTML5...but it was worth the attention

  • I edited with a solution without HTML5, I hope it helps

  • +1 by the HTML5 solution. In the Javascript-only version I find my answer more flexible.

  • Sorry for the delay, my [solution] (http://codepen.io/MagicHat7/pen/vKEGeo), it is possible to compress it?

1

I think the way to do this today is as André said. But to answer your request, only with JS can you organize the code like this:

var regras = {
    nome: /^([a-zA-Zà-úÀ-Ú0-9]|-|_|\s)+$/,
    email: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
    telefone: /^[0-9]{1,}$/
}

function validaForm(form) {
    var invalidos = Object.keys(regras).map(function(nome) {
        var valida = form[nome].value.match(regras[nome]);
        if (!valida) form[nome].placeholder = ['Insira o', nome, 'corretamente'].join(' ');
        return valida;
    });
    return invalidos.length == 0;
}

This way this is all the code you need and you can easily expand as long as you respect the rule that each name of regex is the same name as the name of input.

jsFiddle: https://jsfiddle.net/esmeLuk6/

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.