Skip to main content
Commonmark migration
Fonte Link

###1 - Verificar o caso contrário

1 - Verificar o caso contrário

###2 - Usar o evento blur - UPDATE

2 - Usar o evento blur - UPDATE

##DEMO

DEMO

###1 - Verificar o caso contrário

###2 - Usar o evento blur - UPDATE

##DEMO

1 - Verificar o caso contrário

2 - Usar o evento blur - UPDATE

DEMO

O moderador moveu os comentários para o chat
adicionou 2950 caracteres ao conteúdo
Fonte Link
Samir Braga
  • 10,1mil
  • 6
  • 33
  • 54
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>
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>
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>
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

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

adicionou 278 caracteres ao conteúdo
Fonte Link
Samir Braga
  • 10,1mil
  • 6
  • 33
  • 54

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 inputinputNome = 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";
    document.getElementById("textinho")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){
      document.getElementById("textinho")texto.innerHTML = ''; // ou display: none
      input.style.border = "1px solid #999";
    }
  })
}
inputinputNome.onkeyupaddEventListener('keyup', =valida_form);
inputEmail.addEventListener('keyup', valida_form;valida_form);
Nome: <input type="text" id="nome"><br>
<span id="textinho"><id="textinho-nome"></span>
<br>
Email: <input type="text" id="email"><br>
<span id="textinho-email"></span>

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

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

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
  }
  input.addEventListener('blur', function(){
    if(input.value.length >= 3){
      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>

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>

Fonte Link
Samir Braga
  • 10,1mil
  • 6
  • 33
  • 54
Carregando