Return div to the previous style, after changing style, only with javascript

Question

Return div to the previous style, after changing style, only with javascript

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

Code:

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

The code above does a check in an "input text", if the field is not valid, the changes in the style are realized.

However, after completing the correct field and jumping to the next field, the field where the style was changed remains, such as returning to the original style after the correct field completion?

javascript

asked by anonymous 01.06.2016 / 02:23

2 answers

2

In your first if as well as passing the test, you can change the style properties of the element with setAttribute like this:

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

In case of passing the test it is only to change the properties, but I particularly prefer to work with css classes than inline css, but this is your choice, in case use of classes just do:

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

Your function would look something like this:

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

I hope it helps.

01.06.2016 / 04:50

rewind the click counter signaling where it left off How do I get JSON from a URL to use in my PHP file?

score 1 · Accepted Answer

Using jQuery

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

I personally advise you to make changes to a class as I show here in this jsfiddle

With native JavaScript you can do this:

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

Return div to the previous style, after changing style, only with javascript

2 answers

jsFiddle: link