Javascript setCustomValidity does not work on Chrome Version 65

Question

If you want to set the validity with setCustomValidity function as bellow in chrome the message is not set.

<input type="text" id="username" required placeholder="Enter Name"
oninput="setCustomValidity('error')"  />

As you can see if you run this jsfiddle on Firefox and Chrome you can see that on chrome the field does not have validation message.

In order to see the that something is happening go to firefox open the jsfiddle and input something. After you input something click outside and observ that a red border is added and text "error" is displayed.

Is there a workaround for Chrome?

Edit: I have logged thebug on chromium. Please feel free to follow this thread.

Answer 1

It looks like a bug to me. I tried running the example given in the spec , in a JS fiddle here . Again, it works with Firefox, but not with Chrome.

 function check(input) { if (input.value == "good" || input.value == "fine" || input.value == "tired") { input.setCustomValidity('"' + input.value + '" is not a feeling.'); } else { // input is fine -- reset the error message input.setCustomValidity(''); } }

 <label>Feeling: <input name=f type="text" oninput="check(this)"></label>

---

A workaround could be to use the pattern attribute on the input and provide a regex to validate the input with.

I will use the example given in the spec for this. You can set the regex pattern in the pattern attribute, and error message in the title attribute:

<label>Feeling: <input name=f type="text" pattern="((?!(?:good|fine|tired)).+)" title="Input is not a feeling."></label>

With that, you can use pseudo selector :invalid to apply a red border (or anything else) to the input:

input:invalid {
  border-color: red;
}

 input:invalid { border-color: red; }

 <label> Feeling: <input name=f type="text" pattern="((?!(?:good|fine|tired)).+)" title="Input is not a feeling." value="good"> </label>

Fiddle: https://jsfiddle.net/065thz0w/21/

---

Note: The obvious disadvantage of this approach is that you are no longer being able to use Javascript for validation - and you won't be able to validate the values of a combination of fields.

Answer 2

As of May 11, 2022 Google still has not taken action on the bug filed by OP. I have added a comment to the issue with this same content but figured I would post it here too.

I have determined setCustomValidity starts working ~1s after the window load event in my project, although the timing is completely unpredictable and I can't seem to discern what is actually happening that causes it to start working.

If others come here after struggling with this as I did, I chose to implement a hack workaround rather than haul out all of the code in my app that relies on native validation to replace it with a large library.

It intercepts setCustomValidity in the relevant native Element classes. When invoked, it repeatedly tries calling the native setCustomValdity until it works, until it has tried 100 times, or until the setCustomValidity interceptor is called again from the outside. Feel free to use it in your own projects. It is not pretty, but it works.

https://gist.github.com/hiebj/177b1fcd8c6be85ac8452b7b8d9f8f1a