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

Question

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 above code does a check on an "input text", if the field is not valid, the style changes are made.

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

Answer 1

Both in your first if and if you pass the test, you can change the style properties of the element with setAttribute this way:

 //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 you pass the test just change the properties, but particularly I prefer to work with css classes than inline css, but this is your choice, in case of use of classes is just do:

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

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

Answer 2

Using jQuery

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

I personally urge you to make the changes in a class as I show here on this jsfiddle

---

With Native Javascript you can do so:

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/