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