Changing Style From JavaScript Not Saving

Question

I have an problem with my site when I want to change the css style from the JavaScript it works but only for few seconds.

function validateForm() {
    var fname = document.getElementById('<%=UserFnameTextBox.ClientID%>');
    if (fname.value == "") {
        document.getElementById("WarnUserFnameTextBox").style.opacity = 1;
        document.getElementById('<%=UserFnameTextBox.ClientID%>').style.borderColor = "red";
        getElementById('<%=UserFnameTextBox.ClientID%>').focus;
    }
}

I'm using also Asp.net, that's why I wrote the ID like this

I want that the JS will save the style for as long that the user enter the textbox.

You're submitting a form, and the page is reloaded as the server response. Notice, that the last line lacks document and (). — Teemu
– Teemu, Commented Dec 14, 2018 at 9:47
Like @Teemu said: Your styles are triggering correctly, but as soon as you submit your form, your webpage reloads and falls back to the "default" values, as if the JS would've never been triggered (since it really didn't on that "lifetime"). If you want to make it permanent, I suggest you disable the submit button as long as there are errors. That way the styles will be available as long as there are errors. — Saffe
– Saffe, Commented Dec 14, 2018 at 9:49
For starters, never access data this way, always assign the return of getElementById to a temporary variable and check it, make sure its valid before trying to access it, your Id references are not valid at least the 2nd and 3rd are not. — SPlatten
– SPlatten, Commented Dec 14, 2018 at 9:52
@RaviChauhan Depending on how the validating function was called, returning false may or may not work. — Teemu
– Teemu, Commented Dec 14, 2018 at 9:52

Saffe · Accepted Answer · 2018-12-14 10:27:37Z

3

Multiple things here: I suggest that your validateForm() function triggers in an onClick on your submit-button, right? Does your button look somewhat like this?

<input type="submit" value="submit" onClick="validateForm()">

If this is the case, the reason why your styles work only for few seconds is simply that the website reloads. The styles are in effect, but the form is also triggering and send to the site, which you added in your <form action>. After reloading, the website will fall back to its default style, as if the errors never occured... which is correct on that instance of the site.

If you want to have it permanent, you have to disable the submit-button as long as there are invalid fields. You can make use of the required attribute for form elements as well, since the form won't submit as long as there are invalid fields. These can be styled as well.

Have a look at these CSS rules for that:

/* style all elements with a required attribute */
:required {
    background: red;
}

You can make use of jQuery as well and disable the form-submit with preventDefault. You can take care of every style and adjust accordingly, as long as there empty / non-valid characters in your input-fields. I suggest combining this with the onKeyUp-function. This way you check everytime the users releases a key and can react as soon as your input is valid.

As an example with jQuery:

var $fname   = $('#<%=UserFnameTextBox.ClientID%>');
var $textBox = $('#WarnUserFnameTextBox');

$fname.on("input", function() {
    var $this = $(this);
    if($this.val() == "") {
        $textBox.show();
        $this.focus().css("border", "1px solid red");
    }
});

(thanks for pointing out my errors and optimizing the code, @mplungjan!).

To "disable" the actual form-submission, refer to this answer: https://stackoverflow.com/a/6462306/3372043

$("#yourFormID").submit(function(e){
    return false;
});

This is untested, feel free to point out my mistake, since I can't check it right now. You can play around on how you want to approach your "errorhandling", maybe switch to onKeyDown() or change(), that kind of depends on your needs / usecase.

Since your question isn't tagged with jQuery, have a look at this answer given by mplungjan as well, since it uses native JS without any framework. https://stackoverflow.com/a/53777747/3372043

edited Dec 14, 2018 at 10:27

answered Dec 14, 2018 at 9:57

Saffe

2,2081 gold badge30 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mplungjan Over a year ago

you want var $fname = $('#<%=UserFnameTextBox.ClientID%>') and $fname.on("input", function() { if($(this).val() == "") { - not keyup - and not tagged jQuery

mplungjan Over a year ago

You keep making jQuery object from jQuery object. Not needed

Saffe Over a year ago

Thanks for pointing that out @mplungjan! Appreciated. Credit where credit is due. Also you are right with no jQuery tag. I'll link to your answer as well

mplungjan Over a year ago

var $fname = $('#<%=UserFnameTextBox.ClientID%>'),   $textBox = $('#WarnUserFnameTextBox');  $fname.on("input", function() {   var $this = $(this);   if ($this.val() == "") {     $textBox.show();     $this.focus().css("border", "1px solid red");   } })

- or better toggle the textbox

mplungjan · Accepted Answer · 2018-12-14 10:20:45Z

1

This is likely what you want. It will stop the form from being submitted and is reusing the field and resetting if no error

It assumes <form id="myForm"

window.addEventListener("load", function() {
  document.getElementById("myForm").addEventListener("submit", function(e) {
    var field = document.getElementById('<%=UserFnameTextBox.ClientID%>');
    var error = field.value.trim() === "";
    document.getElementById("WarnUserFnameTextBox").style.opacity = error ? "1" : "0"; // or style.display=error?"block":"none";
    field.style.borderColor = error ? "red" : "black"; // reset if no error
    if (error) {
      field.focus();
      e.preventDefault();
    }
  });
});

answered Dec 14, 2018 at 10:20

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Collectives™ on Stack Overflow

Changing Style From JavaScript Not Saving

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related