Validate different fields with different regex

Question

Validate different fields with different regex

Navigation

#1 by (2 votes)
#2 by (1 votes)

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 do I validate these fields, so that if the user inserts characters that are not suitable, the message appears? Without Jquery, HTML5 and without Ajax? Only with javascript. It's possible ?

javascript

asked by anonymous 24.05.2016 / 23:41

2 answers

1

I think the way to do it nowadays is as André said. But to answer your request, only with JS you can 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;
}

In this way this is the whole code you need and you can easily expand as long as you respect the rule that each regex name is the same as% co_name of the input.

jsFiddle: link

25.05.2016 / 06:07

Error formatting date: Unreachable code detected on connection to bank

score 2 · Accepted Answer

The HTML5 tag has gained the "pattern" attribute to insert a regular expression to be compared with the text entered user.

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

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

For other types of regular expressions, I advise you to take a look at link

No 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);
    }
});

In this way, you do not allow any non-allowed characters to be inserted.