Question about Validating forms using JavaScript in Client-side form validation article

MDN Learn
#1

Hi,

I am going through the article Client-side form validation on MDN and in the section Validating forms using JavaScript there is a detailed example about handing the form validation using JavaScript. All of the cases in the showError() function works but when I fill the input using auto-complete I can still bypass showError() function.

I used a@b using browser’s auto-complete and it didn’t show any error, submit also didn’t prevent it from submitting as it is too short and does not satisfy the minlength="8" attribute. Can anyone explain why is this happening?

Thank you.

#2

Hi @Junaid_Ali

I tested the code on Firefox Developer Edition 113 and it works as expected. So I guess you tested on Chrome? (Generally, it’s a good thing to mention the browser and its version when encountering a problem).

On Chrome 113 I see the problem you described. I added console.log(email.validity); at the start of both event listeners. The input event gets fired when using auto-complete, but the validity object looks like this:

{
  badInput: false,
  customError: false,
  patternMismatch: false,
  rangeOverflow: false,
  rangeUnderflow: false,
  stepMismatch: false,
  tooLong: false,
  tooShort: false,
  typeMismatch: false,
  valid: true,
  valueMissing: false,
}

It’s the same on input and on submit. So the core of the problem is, that the ValidityState objects doesn’t get updated on Chrome when using auto-complete.

Michael

1 Like
#3

Hi @mikoMK

That was exactly the problem I was having. I am using Chrome 112 and the auto-complete on Chrome does not change the property values of the ValidityState object.

So is this a problem or should I ignore it because as you mentioned it does not happen on Firefox. Thank you for your response really appreciate it.

Junaid Ali

#4

That’s something you have to decide for yourself for your project. Alternatively, you can use the built-in validation (Described in the same document) or validate without the Validation API (also same document). The latter is possible, because you have access to the values of the input fields via JS.

1 Like
#5

Thank you @mikoMK for your support I really appreciate it.

1 Like