Validation in JavaScript - how to make the red border disappear?

Question

At the moment, when a field is empty and not valid the field turns red and a describing text shows up. But how do I make the field and text disappear when the user fill in the field correctly?

code in HTML:

<label for="email"><b>Email</b></label>
        <label id="lblemail" style="color: red; visibility: hidden; float: right;">Invalid email</label><br>
        <input type="text" placeholder="Enter Email" name="email" id="email"><br>

code in JS:

var email = document.getElementById("email");

if (email.value.trim() == "") {
    email.style.border = "solid 1px red"
    document.getElementById("lblemail").style.visibility="visible";
    return false;
} else {
  return true; }

The same way you use for adding them - just with different CSS properties. — Andreas, Dec 02 '20 at 09:40
you have to add an [event listener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) to your element, which will be triggered `onchange` and will set/unset the border according to the content of the input field. — secan, Dec 02 '20 at 09:41
Regarding your now deleted question, the feedback you received was correct - questions may feature a GitHub link, but they also need to show the problem in the question itself. It looks like the `register.php` page is on the right lines, but it isn't calling the registration code on a POST operation - at the top is a `print_r($_POST)` but other than that it doesn't seem to call registration code. On POST you probably need to include `dbh.inc.php` and `functions.inc.php` and then call the appropriate code to create a user, supplying the correct POST vars. — halfer, Dec 08 '20 at 22:19

Pauline Nemchak · Accepted Answer · 2020-12-02T09:54:20.377

2

You should add event listener on input event:

const email = document.getElementById('email');
const label =  document.getElementById('lblemail');

email.addEventListener('input', function(e) {
  if (!e.target.value.trim()) {
    email.style.border = 'solid 1px red';
    label.style.visibility = 'visible';
  } else {
    email.style.border = 'solid 1px black';
    label.style.visibility = 'hidden';
  }
})

It's better to use input event because it checks input each time you change it

edited Dec 02 '20 at 09:54

answered Dec 02 '20 at 09:47

Pauline Nemchak

480
4
13

I tried to insert this in my code but it didn't work. Do you know what I might possibly have done wrong? – Agnes99 Dec 02 '20 at 13:23
@agnes99 can you send code you have (like post it on jsfiddle) and errors if you have any? it works on https://jsfiddle.net/Pauline_Nemchak/fgo96c8b/ jsfiddle, prob need to call it after DOM is loaded (DOMContentLoaded event) – Pauline Nemchak Dec 02 '20 at 13:45
Nemchak here is the full code that I had from the beginning: https://jsfiddle.net/Agnes99/91gfywnr/2/. I don't know why the button won't show :( – Agnes99 Dec 02 '20 at 15:38
@Agnes99 I made a small example how it can be done https://jsfiddle.net/Pauline_Nemchak/ha4s2ojk/58/. Tell me how understandable it is, and if you understand how to continue with passwords and checkboxes. I will update my answer when it's fine – Pauline Nemchak Dec 02 '20 at 17:04
I think I understand and it works for me in jsfiddle but not in atom... do you know why? – Agnes99 Dec 03 '20 at 09:14
I get "Uncaught TypeError: Cannot read property 'addEventListener' of null" as error message – Agnes99 Dec 03 '20 at 09:44
@Agnes99 probably you're trying to add event listener to an element that doesn't exist yet (need to add all js code inside DOMContentLoaded) or there's a typo in that selector. Do you have discord so we could make a live coding session? – Pauline Nemchak Dec 03 '20 at 09:57
Unfortunately I don't. I've followed this yt-guide https://www.youtube.com/watch?v=rsd4FNGTRBw and it too works on jsfiddle (https://jsfiddle.net/Agnes99/uc7k64g8/) but not on my browser. I'm using atom to develop and manage the code if that helps. – Agnes99 Dec 03 '20 at 10:12
@Agnes99 can you upload all your project to github? – Pauline Nemchak Dec 03 '20 at 10:23
@Agnes99 I'll send you PR a bit later – Pauline Nemchak Dec 03 '20 at 13:38
1

I managed to solve it! Apparently I just needed to put the link to my js-file in the body and not in the head.:) – Agnes99 Dec 03 '20 at 19:03
@Agnes99 that's great! I didn't sleep much, decided to take a look today – Pauline Nemchak Dec 04 '20 at 07:20
I've run into trouble again... :( As it is now I have a sign-in form on three html files (it's the same form). But when I validate the form it seems that if I can only validate one of them even though they are the same with same id's and such. Can I somehow validate these without having to write the same validation code three times? Or can I have my form in an external file that I call within the html files? – Agnes99 Dec 04 '20 at 08:14
@Agnes99 yes, you can't use one id multiple times on the same page, you can use class instead and select all forms with `const forms = document.querySelectorAll('.class')`, after `forms.forEach(form => form.addEventListener('input')........)`. I can recommend these resources: https://javascript.info/ https://javascript30.com/, they are free – Pauline Nemchak Dec 04 '20 at 08:50

score 1 · Answer 2 · answered Dec 02 '20 at 09:39

1

I think you can unset using js code

var email = document.getElementById("email");

if (email.value.trim() == "") {
    email.style.border = "solid 1px red"
    document.getElementById("lblemail").style.visibility="visible";
    return false;
} else {
    email.style.border = "none"
    document.getElementById("lblemail").style.visibility="hidden";
  return true; 
}

answered Dec 02 '20 at 09:39

Vishal Bartakke

294
1
9

Without an event listener, the code will run only once and set the border according to the content of the input field in that moment, but if the content changes, the code will not re-run and the border will not be updated. – secan Dec 02 '20 at 09:44
Yes, I assumed that the code in question is inside an event handler – Vishal Bartakke Dec 02 '20 at 09:46

score 0 · Answer 3 · answered Dec 02 '20 at 09:41

i think you can use a eventlistener, this should work

var email = document.getElementById("email");

email.addEventListener('change', () => {
 if (email.value.trim() == "") {
     email.style.border = "solid 1px red"
     document.getElementById("lblemail").style.visibility="visible";
     return false;
 } else {
   email.style.border = none;
   document.getElementById("lblemail").style.visibility="visible";
   return true; }

})

Validation in JavaScript - how to make the red border disappear?

3 Answers3