2

Código:

function valida_form (){
	
		var filter_nome = /^([a-zA-Zà-úÀ-Ú0-9]|-|_|\s)+$/ ;
		if(!filter_nome.test(document.getElementById("input_nome_cad").value)){
		document.getElementById("input_nome_cad").value='';
		document.getElementById("input_nome_cad").placeholder = "Nome inválido";
		document.getElementById("input_nome_cad").focus();
		document.getElementById("input_nome_cad").style.borderColor = "#ff0000";
		document.getElementById("input_nome_cad").style.outline = "#ff0000";
		return false;}
  }

O código acima faz uma verificação em um "input text", caso o campo não seja válido, as alterações no estilo são realizadas.

No entanto, após realizar o preenchimento correto do campo e saltar para o próximo, o campo onde o estilo foi alterado permanece alterado, como voltar ao estilo original, após o preenchimento correto do campo ?

2
  • 1
    como você disse se um pouco novo com JavaScript, dá uma lida neste site: H5F.js, lá ele explica muita coisa sobre a implementação blibioteca em questao. Commented 1/06/2016 às 10:15
  • @TobyMosque bem interessante, mas acredito ser mais fácil aprender de forma procedural do que classes e bibliotecas, acho que sou meio conservador meio oldschool, o que nåo nos liberta de um paradoxo em relação a tecnologias...
    – MagicHat
    Commented 1/06/2016 às 18:14

2 Respostas 2

2

Usando jQuery

element.removeAttr('style'); 
element.removeAttr('placeholder');

eu pessoalmente aconcelho-te a fazeres as alterações numa classe como eu mostro aqui neste jsfiddle


Com JavaScript Nativo podes fazer assim:

function meteEstilo() {
    var element = document.getElementById('myInput');
    element.classList.add('estilo-novo');
    element.setAttribute('placeholder', 'inválido!');
}

function tiraEstilo() {
    var element = document.getElementById('myInput');
    element.classList.remove('estilo-novo');
    element.removeAttribute('placeholder', '');
}

jsFiddle: https://jsfiddle.net/168LL767/3/

8
  • vlw mas é que eu queria no puro javascript...
    – MagicHat
    Commented 1/06/2016 às 1:26
  • acrescentei, vê lá se ajuda Commented 1/06/2016 às 1:29
  • Se eu aplicar removeAttribute, ele irá remover o atributo, eu gostaria que ele voltasse ao primeiro estilo. Me corrija se eu estiver errado...
    – MagicHat
    Commented 1/06/2016 às 1:31
  • var originalStyle =document.getElementById('sample_id').getAttribute('style'); Guardas isso algures e depois fazes set se quiseres retornar ao original. Commented 1/06/2016 às 1:33
  • Ainda assim a melhor solução, sem duvida, é introduzir a class de css com as alterações necessárias. Depois é só tira-la para voltar ao original. Commented 1/06/2016 às 1:35
2

Tanto no seu primeiro if quanto no caso de passar no teste, você pode alterar as propriedades de style do elemento com setAttribute dessa forma:

 //Esse de acordo com o seu código no caso falha.
 document.getElementById('input_nome_cad').setAttribute('style', 'border-color : #ff0000; outline : #ff0000;');

No caso de passar no teste é só alterar as propriedades, mas particularmente eu prefiro trabalhar com classes css do que css inline, mas isso é escolha sua, no caso de uso de classes é só fazer:

 document.getElementById('input_nome_cad').setAttribute('class', 'suaClasse');

Sua função ficaria mais ou menos assim:

function valida_form (){

    var filter_nome = /^([a-zA-Zà-úÀ-Ú0-9]|-|_|\s)+$/ ;     
    if(!filter_nome.test(document.getElementById("input_nome_cad").value)){
       document.getElementById("input_nome_cad").value='';
       document.getElementById('input_nome_cad').setAttribute('placeholder', 'Nome inválido');
       document.getElementById("input_nome_cad").focus();
       document.getElementById("input_nome_cad").setAttribute('style', 'border-color : #ff0000; outline : #ff0000;');
       return false;
    }
    else{
       document.getElementById("input_nome_cad").setAttribute('style', 'border-color : #000000;');      
       document.getElementById('input_nome_cad').setAttribute('placeholder', '');
       //ou document.getElementById('input_nome_cad').removeAttribute('placeholder');
    }
    return true;
}

Espero que ajude.

2
  • Eu não estou sabendo montar o if else...Tem como se emendar lá no código, tô meio perdido, na verdade acho que fritou o tico...Tipo são 4 estados,1 o normal (em branco), 2 se passa no teste normal num muda nada, 3 se num passa dai muda, 4 se o cara corrige e passa dai fica normal...
    – MagicHat
    Commented 1/06/2016 às 2:54
  • Dá uma olhada lá, acho que isso resolve, qualquer coisa é só ajustar agora. Commented 1/06/2016 às 3:20

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 .