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>
Como valiar esses campos, para que caso o usuário insira caracteres não condizentes, a mensagem apareça ? Sem Jquery, HTML5 e sem Ajax ? Só com javascript. É possível ?

2
  • Qual é a dificuldade que vc ta enfrentando?
    – Guerra
    Commented 24/05/2016 às 22:07
  • @Guerra o código não funciona, e não acho o erro. Mas a ideia é se o usuário inserir letras por exemplo no campo telefone gostaria que aparecesse a mensagem no placeholder.
    – MagicHat
    Commented 24/05/2016 às 22:21

2 Respostas 2

2

A tag do HTML5 ganhou o atributo "pattern" para inserir uma expressão regular para ser comparada com o texto inserido usuário.

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

Nesse caso, a parte [0-9] da expressão regular pro telefone significa que podem ser inseridos apenas números de 0 a 9 e a segunda parte {8} quer dizer que podem ser inseridos 8 valores.

Para outros tipos de expressões regulares, aconselho o dar uma olhada em http://www.w3schools.com/jsref/jsref_obj_regexp.asp

Sem HTML5

Sem HTML5, a solução que penso é verificar cada campo cada vez que o texto do campo mudar. Exemplo:

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

Dessa forma, você nao permite que os caracteres não permitidos sejam inseridos.

5
  • Se você quiser deixar alguma mensagem no placeholder, o HTML5 também possui o atributo "placeholder", que você pode definir a mensagem que vai aparecer Commented 24/05/2016 às 22:37
  • Domas putz que chato que sou, esqueci de colocar sem ser HTML5...mas valeu a atenção
    – MagicHat
    Commented 24/05/2016 às 22:38
  • Editei com uma solução sem HTML5, espero que ajude Commented 24/05/2016 às 23:13
  • +1 pela solução HTML5. Na versão só com JavaScript acho a minha resposta mais flexivel.
    – Sergio
    Commented 25/05/2016 às 4:07
  • Desculpe a demora, minha [solução] (codepen.io/MagicHat7/pen/vKEGeo), é possível compactá-lo?
    – MagicHat
    Commented 31/05/2016 às 17:06
1

Acho que a maneira de fazer isso hoje em dia é como o André referiu. Mas para responder ao teu pedido, só com JS podes organizar o código assim:

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

Desta maneira este é o código todo que precisas e podes expandir facilmente desde que respeites a regra que cada nome de regex é o mesmo nome do name do input.

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

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 .