CODEWITHSUNDEEP
javascripthtmlcss
Mayli
Mayli

Reputation: 93

Changing Style From JavaScript Not Saving

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.

Upvotes: 3

Views: 732

Answers (2)

DasSaffe
DasSaffe

Reputation: 2198

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

Upvotes: 3

mplungjan
mplungjan

Reputation: 178422

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

Upvotes: 1

Related Questions