New issue
Advanced search Search tips

Issue 828757 link

Starred by 2 users
Status: Available
Owner: ----
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

Validation message set by setCustomValidity() is not shown on hover

Reported by radu....@connatix.com, Apr 4 2018 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Example URL:
https://jsfiddle.net/065thz0w/3/

Steps to reproduce the problem:
1. create a webpage with the flowing input 
<input type="text" id="username" required placeholder="Enter Name"
oninput="setCustomValidity('error')"  />
2. enter something in the input 
3. click outside 

What is the expected behavior?
The field should have been red
The field should have error message on hover

What went wrong?
Nothing happens.  

Does it occur on multiple sites: N/A

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 65.0.3325.181  Channel: stable
OS Version: 10.0
Flash Version:

Comment 1 by woxxom@gmail.com, Apr 4 2018 

AFAICT, this is working as per the specification:
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-algorithm
1. validation is performed on form submission, but you don't have any
2. the red border for invalid elements is not part of the spec so it should be added explicitly via CSS
   :invalid { border: 1px solid red }

Quoting https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()

   The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted.

Also, your code is incorrect: "setCustomValidity('error')" should be "this.setCustomValidity('error')"

Comment 2 by dtapu...@chromium.org, Apr 4 2018

Components: Blink>Forms>Validation

Comment 3 by krajshree@chromium.org, Apr 4 2018

Labels: Needs-Triage-M65

Comment 4 by tkent@chromium.org, Apr 5 2018

Labels: -Type-Compat -Needs-Triage-M65 Type-Bug
Status: Available (was: Unconfirmed)
Summary: Validation message set by setCustomValidity() is not shown on hover (was: Javascript setCustomValidity does not work on Chrome Version 65)
> What is the expected behavior?
> The field should have been red

Firefox works so because it has non-standard pseudo selector :moz-ui-invalid, and it has the default style.

> The field should have error message on hover

It seems this is a real bug. If we hover on the <input> without typing anything, it shows "Please fill out this field" tooltip. However, after calling setCustomValidity(), no tooltip is shown.
►

Sign in to add a comment