Assessment wanted: Form validation - Task 3

MDN Learn
#1

Hello,
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.

#2

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

https://developer.mozilla.org/en-US/docs/Web/Events

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:

#3

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.

#4

Hello @Marcell_Mihaly

thanks for correcting me

try the follwing

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

that little ; before ) do the trick

i tested on firefox and brave browser

hope that help and have a nice day

#5

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:

emailField.setCustomValidity('');

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