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

Asked

Viewed 133 times

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

  • 1

    as you said if a little new with Javascript, gives a read on this site: H5F.js, there he explains a lot about the blibioteca implementation in question.

  • @Very interesting tobymosque, but I think it’s easier to learn procedural than classes and libraries, I think I’m a bit of an oldschool conservative, which doesn’t free us from a technology paradox...

2 answers

2

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.

  • I don’t know how to ride the if It... It has how to mend there in the code, I’m half lost, actually I think fried the tico... Type are 4 states,1 the normal (blank), 2 passes the normal test in one changes nothing, 3 if in one passes changes, 4 if the guy corrects and passes from there becomes normal...

  • Take a look there, I think that solves, anything just adjust now.

1


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/

  • vlw but is that I wanted in pure javascript...

  • I added, see if it helps

  • If I apply removeAttribute, it will remove the attribute, I would like it to return to the first style. Correct me if I’m wrong...

  • var originalStyle =Document.getElementById('sample_id'). getattribute('style'); Save it somewhere and then set it if you want to return to the original.

  • Still the best solution, no doubt, is to introduce the css class with the necessary changes. Then just take it off to go back to the original.

  • type so the guy type a wrong name in the field, then appears the placeholder "Wrong name" and the red border, then the guy corrected and jumps to the next field, at that time the field that was red back to normal, but I was thinking something like if Else, or while(while the field data does not meet the regex turns red if Naum stays as is)... I know I may be complicating , but I would like to see a type code to return the previous state and not add a new style... League I am pure confusion...

  • then but what I showed in jsfiddle was exactly that, only instead of using validation I added the changes via butons

  • Num leva a mal mai está em jquery, can I change in pure javascript? It’s just that I’m totally newb...

Show 3 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.