HTML JS manual form validation not working

Question

I'm trying to manually validate a form in HTML/CSS/JS. At the very basic level, I want to ensure that the user cannot input blank values for first name and last name. The problem is that whenever I try to change or update the inputs to what the user has written, it doesn't save. Everything remains "null". It's also extremely frustrating that in my JS code when I'm trying to use an IF statement to check if the first name has no value or is null, I get an immediate error message that "first" is null, because its null no matter what, if you input something or not, but it doesn't even complete it's job. I'm using the if statement to CHECK if its null, not for it to do something with it, so why is it having an issue simply following the code below it if the condition is true? I've sat on this for like an hour and its becoming unbearable. I'm new to JS and Im really not getting how something as simple as IF statements isn't working for me.

HTML form:

    <form action="" method="get" id="my-form">
      <h1>Contact Us</h1>
      <div class="txtb">
        <label>First Name :</label>
        <input type="text" id = "firstname" placeholder="Enter Your First Name">
      </div>
      <div class="txtb">
        <label>Last Name :</label>
        <input type="text" id = "lastname" placeholder="Enter Your Last Name">
      </div>
      <div class="txtb">
        <label>Email :</label>
        <input type="email" id = "email" placeholder="Enter Your Email" required>
      </div>
      <div class="txtb">
        <label>Date Visited :</label>
        <input type="date" id = "date" required>
      </div>
      <div class="txtb">
        <label>What did you think of it when you visited? :</label>
        <textarea id = "msg" required></textarea>
      </div>
      <button type='submit'>Submit</button>
      <!--onclick = form.submit()-->
    </form>
  </div>
  <div id="error"></div>

New JS:

let first = document.getElementById("firstname").value;
let last = document.getElementById("lastname").value;
let email = document.getElementById("email").value;
let msg = document.getElementById("msg").value;
let date = document.getElementById("date").value;
let form = document.getElementById("my-form");
let errorEl= document.getElementById("error");

function formChanged() {
  first = document.getElementById("firstname");
  last = document.getElementById("lastname");
  email = document.getElementById("email");
  msg = document.getElementById("msg");
  date = document.getElementById("date");
  console.log(first,last,email,msg,date,form)
}
form.addEventListener('submit', (e) => {
  let messages = []
  console.log(first, last)
  if (first === '' || first == null){
    messages.push('First name is required')
  }
  if (last === '' || last == null){
    messages.push('Last name is required')
  }
  if (messages.length>0){
    e.preventDefault()
    errorEl.innerText = messages.join(', ')
  }
  console.log(first, last)
})
//window.alert(messages)

If anyone knows a better way to do this manually also, it would be greatly appreciated if you could share it. At this point, everything works except the messages array remains the same, so I'm going to add something to remove the messages if first doesn't == null or ''

Yep. I swear it makes no difference just as long as its after the code in the body? In this case, it doesn't, anyway, cos I get the exact same errors and problems. — , Jan 15 '21 at 15:35
What errors? You should specify exactly what errors in your question — Rojo, Jan 15 '21 at 15:35
The errors were with the IF statement not understanding what it's being asked, (TypeErrors) that has been solved. I apologise for not making it clear, I wrote out this whole question earlier but forgot to post, and I guess in rewriting i must've forgotten. The IF statement errors have been solved, it's just logical errors now. All the variables are still stuck as "null". I changed it so that in function formChanged(), they are initialised as document.getElementById("firstname"), without the .value. I also changed the if statement to compare first instead of first.value. — , Jan 15 '21 at 15:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227386/discussion-between-rojo-and-dr-haircake). — Rojo, Jan 15 '21 at 15:40

Sorikairo · Answer 1 · 2021-01-15T15:44:23.440

1

Edit :

You are doing first = document.getElementById("firstname").value; so it get by ID but you don't have any id.

For example, change

 <input type="text" name = "firstname" placeholder="Enter Your First Name">

to

 <input type="text" id="firstname" name="firstname" placeholder="Enter Your First Name">

Notice the id="firstname".

Original Answer :

Your function

function formChanged() {
  first = document.getElementById("firstname").value;
  last = document.getElementById("lastname").value;
  email = document.getElementById("email").value;
  msg = document.getElementById("msg").value;
  date = document.getElementById("date").value;
  console.log(first,last,email,msg,date,form)
}

Is setting first to document.getElementById("firstname").value; while you first initialized it to

let first = document.getElementById("firstname");.

Notice, that in your function you set it to the input's .value, not the input itself.

So if (first.value === '' || first.value == null) won't work because first is already equal to .value thus you are in fact doing document.getElementById("firstname").value.value which is undefined !

Try either :

to change formChanged variable initialisation to document.getElementById("firstname")

OR

change the if to if (first == '' || first== null)

edited Jan 15 '21 at 15:44

answered Jan 15 '21 at 14:55

Sorikairo

798
4
19

Changing it to if (first == '' || first== null) has solved the issue of having the IF statements not run, but all variables are still stuck as "null" – Jan 15 '21 at 15:37
@Dr_Haircake I edited my answer, I noticed the problem :) – Sorikairo Jan 15 '21 at 15:44
Yep, I did that but the logical errors are still there. I had it like this before tbh, I just changed it to .value cos the video had it like that and it worked perfectly even though its the same code. Very confusing, but thank you for your help so far. Lmk if you have any other suggestions :) – Jan 15 '21 at 15:47
@Dr_Haircake Edit your answer with what you did/your final code :) – Sorikairo Jan 15 '21 at 15:51
@Dr_Haircake also mark my answer if you think that was helpful, or I'll delete it :) – Sorikairo Jan 15 '21 at 15:52

score 0 · Accepted Answer · answered Jan 15 '21 at 16:21

0

Adding on to what Sorikairo said:

From this answer, add a return value to your onsubmit instead of preventDefault:

  if (messages.length>0){
    // e.preventDefault()
    return false;
    errorEl.innerText = messages.join(', ')
  }
  return true;

answered Jan 15 '21 at 16:21

Rojo

2,749
1
13
34

score 0 · Answer 3 · answered Jan 15 '21 at 16:27

SOLVED: If you run into this problem, check all of your .value lines, because doubling them up or not having enough was the main problem here. Everything was being checked against the wrong things. I also recommend console.log() ing everything you do like I did just for variable tracking.

Final JS:

let first = document.getElementById("firstname").value;
let last = document.getElementById("lastname").value;
let email = document.getElementById("email").value;
let msg = document.getElementById("msg").value;
let date = document.getElementById("date").value;
let form = document.getElementById("my-form");
let errorEl= document.getElementById("error");

function formChanged() {
  first = document.getElementById("firstname").value;
  last = document.getElementById("lastname").value;
  email = document.getElementById("email").value;
  msg = document.getElementById("msg").value;
  date = document.getElementById("date").value;
  form= document.getElementById("my-form");
  errorEl = document.getElementById("error");
  console.log(first,last,email,msg,date,form)
}
form.addEventListener('submit', (e) => {
  formChanged()
  errorEl.innerText = '';
  var messages = []
  if (first === '' || first == null){
    messages.push('First name is required')
  }
  if (last === '' || last == null){
    messages.push('Last name is required')
  }
  if (messages.length>0){
    e.preventDefault()
    errorEl.innerText = messages.join(', ')
  }
  console.log(first, last)
  console.log(messages)
    })
//window.alert(messages)

Final HTML:

    <form action="" method="get" id="my-form">
      <h1>Contact Us</h1>
      <div class="txtb">
        <label>First Name :</label>
        <input type="text" id = "firstname" placeholder="Enter Your First Name">
      </div>
      <div class="txtb">
        <label>Last Name :</label>
        <input type="text" id = "lastname" placeholder="Enter Your Last Name">
      </div>
      <div class="txtb">
        <label>Email :</label>
        <input type="email" id = "email" placeholder="Enter Your Email" required>
      </div>
      <div class="txtb">
        <label>Date Visited :</label>
        <input type="date" id = "date" required>
      </div>
      <div class="txtb">
        <label>What did you think of it when you visited? :</label>
        <textarea id = "msg" required></textarea>
      </div>
      <button type='submit'>Submit</button>
      <!--onclick = form.submit()-->
    </form>
  </div>
  <div id="error"></div>

HTML JS manual form validation not working

3 Answers3