Assessment wanted: Form validation - Task 3

I need some help with this task, please. I can’t figure it out.
My problem is, that once a custom validation message was set, the input will never turn valid again, even if all the constraints are met. If I copy-paste an email address into the input field, it goes through. However, if I type the address in, the validation will fail. The update doesn’t seem to work for some reason.

This is my solution: CodePen: Form Validation Assessment 3

Thank you in advance for your help.

Hello @Marcell_Mihaly

sorry for late replay

there was typo issue

change this

email.addEventListener("input", function(event) 

to this

email.addEventListener("Inputs", function(event)

check all the type of event on this link

also try to use IDE or editor to help you with those type of issue

hope that help and have a nice day :slight_smile:

Hello @justsomeone,
thank you for your reply.

Unfortuntely it doesn’t work. “Inputs” is not a valid event type. What we need is the HTMLElement input event

If I follow your suggestion, the event is not caught by the listener, and the validation message resets to the browser default.

Hello @Marcell_Mihaly

thanks for correcting me

try the follwing

email.addEventListener('input', function(event) {
  if (email.validity.valid) {
  } else {

that little ; before ) do the trick

i tested on firefox and brave browser

hope that help and have a nice day

Hey guys,

for those of you who are interested, I’m posting the solution to this problem.
First of all, I updated the original code with a little ‘debug’-panel, that tracks the states of the validity object properties.
The problem seems to be, that the testing starts with setting a custom message to correct values, which automatically sets validity.valid to false:


This way, the input will never turn out to be valid.

I uploaded the correct solution with the improved logic. Take a look!

Have a good day!

1 Like