Form Validation not working

Hey guys,

I just wanted to create a client-side Form-Validation for my Registration Form.
I set it up to start checking the input once I click “Sign Up”. However, once I press the button, nothing happens.
It should mark every field red and add a red exclamation-circle to the input fields. Once you set it right it should mark the relating input field green and add a green check-circle Icon to the input field. Both is not happening and I cannot understand why.
If I enter the wrong email address, it makes a warning, but a browser-based one.
Does anyone have any ideas?

This is the link to my repository:

Looking forward to hearing from you guys!

Best Maximilian

Hi Maximilian,
this is the error I see in the console:

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at SignUp-Error.js:9

He is listening at an input-type=submit with the value “Sign Up”

I replaced the input parameter and used a function instead. But it is still not accepting it. I do not know why though.

It was a type I meant the button function.

form.addEventListener('Sign Up', (e) => {
Hmm, no, I think it’s listening to the non existent event ‘Sign up’.

I tried this function in my SignUp form for submitting the data:

input type=“submit” name=“submit” value=“submit” class=“LogIn-Button”

I replaced the ‘Sign Up’ with ‘submit’, it still does not work.
I also tried
button submit /button, but it does not react either.

Do I have to place the javascript link inside the html form itself? Or can it still be at the bottom of the body element?

When it says that cannot read property of null it means that it can’t find the variable form. You need to check what’s wrong with it. Have you defined it? Try to log it below the function and have a look what the console says.

form.addEventListener('Sign Up', (e) => {}
‘Sign up’ ––> event fired
(e) ––> Where does this parameter come from?

There is no event ‘Sign up’. See the event reference here:
(There is an event ‘submit’)
You do not need to pass the event, it is available in the function body.

hey mirja,
I found the issue. Quite interesting actually. The function worked all the time, but I had to remove all the “required” settings from the other options ( radio ), otherwise, it would not work, except if you click one radio option that was required originally and click submit, the error messages show and work perfectly. I guess custom validation doesn’t get along that well with automated browser validation.

But thanks for your help anyway!

Best Max