1

Estou trabalhando em um formulário o qual se a pessoa não preencher os campos, o <input> fica com uma borda vermelha, e em baixo aparece o nome "Campo obrigatório".

Está funcionando tudo bem, porém preciso que quando a pessoa preencher o campo ele volte ao seu estado normal, sem borda vermelha e sem o nome que é inserido "Campo obrigatório". Pois ele aparece, mas não some depois de preenchido!


Antes inserir a descrição da imagem aqui
Depois - Errado inserir a descrição da imagem aqui
Depois - Como deve ficar inserir a descrição da imagem aqui
O <form> está da seguinte forma:

    <form class="form-horizontal" id="formulario" name="formulario" method="get" 
action="http://localhost/br/p/124678139/" onsubmit="return valida_form(this)"></form>

Meu código Javascript:

function valida_form (){
if(document.getElementById("nome").value.length < 3){
document.getElementById("nome").focus();
document.getElementById("nome").style.border = "1px solid #ef3c59";
document.getElementById("textinho").innerHTML='<p class="help-block ng-binding" style="color:#ef3c59;">Campo obrigatório</p>';
return false
}
}

Também necessito fazer funcionar no campo de e-mail, no qual utilizo o seguinte código:

function valida_form (){
var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if(!filter.test(document.getElementById("emaile").value)){
document.getElementById("emaile").focus();
document.getElementById("emaile").style.border = "1px solid #ef3c59";
document.getElementById("textinho2").innerHTML='<p class="help-block ng-binding" style="color:#ef3c59;">E-mail inválido</p>';
return false
}
}
7
  • Que recentes alterações? Você mudou a pergunta?
    – Maniero
    Commented 31/08/2016 às 20:11
  • Sim, não tinha colocado o script de e-mail, e o usário da resposta anterior não é um usuário muito frequente. Commented 31/08/2016 às 20:28
  • O problema é que você não pode mudar a pergunta e invalidar as repostas dadas. Pergunta feita e respondida deve permanecer a mesma. A alteração cria um problema.
    – Maniero
    Commented 31/08/2016 às 20:35
  • 3
    Ele deu a resposta, encerrou. Você quer algo diferente, tem que abrir uma nova pergunta. Editar para mudar o teor da pergunta e pedir para as pessoas atualizarem suas respostas não é uma opção válida.
    – Maniero
    Commented 31/08/2016 às 21:06
  • 2
    Na verdade tem que fazer a pergunta completa já de uma vez. Se fosse um usuário novo, eu entenderia, mas acho que já deu pra perceber que aqui é um site de perguntas objetivas e respostas objetivas, e não de "consultoria progressiva" né? :P
    – Largato
    Commented 31/08/2016 às 21:19

2 Respostas 2

6
+50

Segue uma implementação um pouco mais genérica, inclusive você poderá incluir outras regras de validação, como valor mínimo, máximo, etc.

var InputValidation = function (input) {
  var that = this;

  this.input = input;
  this.msg = document.createElement("p");
  this.msg.classList.add("validation-msg");
  this.msg.classList.add("help-block");
  this.msg.classList.add("ng-binding");
  this.input.parentElement.insertBefore(this.msg, this.input.nextElementSibling);

  this.refInvalidInput = function (event) {
    that.isValid();
  }
}

InputValidation.patterns = {};
InputValidation.patterns.email = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;

InputValidation.prototype.isValid = function (event) {
  if (this.input.dataset.required && !this.input.value.trim())
  {
    this.input.classList.add("invalid");
    this.input.addEventListener("input", this.refInvalidInput);
    this.msg.textContent = this.input.dataset.required;  
    return false;
  }

  if (this.input.dataset.email && this.input.value.trim() && !InputValidation.patterns.email.test(this.input.value))
  {
    this.input.classList.add("invalid");
    this.input.addEventListener("input", this.refInvalidInput);
    this.msg.textContent = this.input.dataset.email;  
    return false;
  }

  this.input.classList.remove("invalid");
  this.input.removeEventListener("input", this.refInvalidInput);
  return true;
}

var FormValidation = function (form) {
  var that = this;
  var inputs = form.querySelectorAll(".validation");
  
  this.form = form;
  this.inputs = [].map.call(inputs, function (input, indice) {
    return new InputValidation(input);
  });

  this.form.addEventListener("submit", function (event) {
    that.onFormSubmit(event);
  });
}

FormValidation.prototype.onFormSubmit = function (event) {
  var erros = this.inputs.filter(function (entry, indice) {
    return !entry.isValid();
  });
  if (erros.length > 0) {
    erros[0].input.focus();
    event.preventDefault();
  }
}

var form = document.getElementById("form");
form = new FormValidation(form);
.validation + .validation-msg {
  display: none;
}

.validation.invalid + .validation-msg {
  display: block;
  color: #ef3c59;
}

.validation.invalid {
  border: 1px solid #ef3c59;
}
<form id="form">
  <div>
    <label>
      Texto:
      <input id="texto" type="text" class="validation"
             data-required="Campo Obrigatório" />
    </label>
  </div>
  <div>
    <label>
      Email:
      <input id="texto" type="text" class="validation"
             data-email="Email Invalido"
             data-required="Campo Obrigatório" />
    </label>
  </div>
  <div>
    <label>
      <input id="enviar" type="submit" />
    </label>
  </div>
</form>

10
  • Amigo, só tem um detalhe, o formulário é um pouco grande, quando eu clico pra enviar ele aparece as mensagens de validação, porém ele não sobe a tela pra cima, a pessoa tem que subir manualmente. Como corrigir esse probleminha? :) Commented 31/08/2016 às 18:38
  • 1
    @AlexandreLopes, você pode dá focus no input com erro, mas no exemplo acima ele valida todos os inputs ao realizar o submit, então você teria de eleger um input para receber o focus, a outra opção é criar um summary. Commented 31/08/2016 às 18:44
  • 1
    @AlexandreLopes, um summary é basicamente uma <ul> contendo os erros. Commented 31/08/2016 às 19:07
  • 2
    @AlexandreLopes realizei uma edição, agora ele dará focus no primeiro input. Commented 31/08/2016 às 19:38
  • 3
    Muito obrigado! Você é feraa! Ainda não posso te dar os +50 porque só desbloqueia depois de 8 horas, mas já dei resposta como certa. Foi genial! Meus parabéns pelo seu conhecimento, e por tentar ajudar o próximo :D Commented 31/08/2016 às 19:50
3

Você pode fazer isso de duas formas:

1 - Verificar o caso contrário

Você usa um if para verificar e exibir a mensagens, use um else para escondê-la:

var input = document.getElementById("nome");
function valida_form(){
  if(input.value.length < 3){
    input.focus();
    input.style.border = "1px solid #ef3c59";
    document.getElementById("textinho").innerHTML = '<p class="help-block ng-binding" style="color:#ef3c59;">Campo obrigatório</p>';
    return false
  }else{
    document.getElementById("textinho").innerHTML = ''; // ou display: none
    input.style.border = "1px solid #999";
  }
}
input.onkeyup = valida_form;
<input type="text" id="nome"><br>
<span id="textinho"></span>

2 - Usar o evento blur - UPDATE

Você esconde um texto no evento Blur (tirar o foco do input):

var inputNome = document.getElementById("nome");
var inputEmail = document.getElementById("email");

function valida_form(e){
  var input = e.target; // captura o elemento em questão
  // texto = captura do texto com ID igual a "textinho-"+ID do input
  var texto = document.getElementById("textinho-"+input.id); 
  if(input.value.length < 3){
    input.focus();
    input.style.border = "1px solid #ef3c59";
    texto.innerHTML = '<p class="help-block ng-binding" style="color:#ef3c59;">Campo obrigatório</p>';
    return false
  }
  input.addEventListener('blur', function(){
    if(input.value.length >= 3){
      texto.innerHTML = ''; // ou display: none
      input.style.border = "1px solid #999";
    }
  })
}
inputNome.addEventListener('keyup', valida_form);
inputEmail.addEventListener('keyup', valida_form);
Nome: <input type="text" id="nome"><br>
<span id="textinho-nome"></span>
<br>
Email: <input type="text" id="email"><br>
<span id="textinho-email"></span>

3 - Prevent Submit

Exemplo impedindo a submissão:

Obs.: Sempre coloco o texto de aviso com alguma referência que se torne automática, no caso, foi o fato dele ter o id "textinho-" + o ID do campo. O argumento da função valida_form(form) agora é o formulário, como você pode ver. E todo input que você deseja que entre na validação deve ter a classe .required.

Código: Você insere novas regras de validação do formulário no objeto isValid, o qual é usado para verificações, e os estilos e funções de "válido" ou "inválido" no objeto validate.

DEMO

5
  • É possível regular o minlenght por algum data- =" " no HTML? Tipo a linha var minLength = 5; Commented 2/10/2016 às 12:37
  • @AlexandreLopes, dá, basta apagar a linha var minLength = 5; e acrescentar dentro da função minLength do objeto isvalid essa linha: var minLength = parseFloat(input.getAttribute('data-minlength')) || 3;. Agora acho melhor apagar o comentários antigos rsrs Commented 2/10/2016 às 12:51
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    Commented 2/10/2016 às 12:53
  • Muito obrigado pela força Samir, meus parabéns pelo seu conhecimento, e obrigado por ajudar pessoas como eu, kkkkk... Você é uma ótima pessoa. Obrigado! :) Commented 2/10/2016 às 13:13
  • @SamirBraga Samir, é possível determinar qual texto de erro aparecerá por algum data-=" " no HTML? Tipo o (Campo obrigatório). Commented 9/10/2016 às 12:51

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 .