How to change warning text when pattern is used in input?

When I use pattern in input like this:

<input type="text" value="" pattern="(\d|(\d,\d{0,2}))"> 

I receive popup warning with text. How can I easily change this text?

Answers


<input type="text" value="" pattern="(\d|(\d,\d{0,2}))" title="YOUR_WARNING_TEXT" > 

The text shown can be defined in the title attribute of the input tag.


This question has already been answered in the past. Please see the following URL for the answer: HTML5 form required attribute. Set custom validation message?


<input type="text" value="" pattern="(\d|(\d,\d{0,2}))" oninvalid="this.setCustomValidity('ERROR_TEXT')" oninput="this.setCustomValidity('')"/>

Try this code, corrected to clear after input...


The title is appended to the pattern warning. Just keep in mind the warnings are translated into the browser language, which can make an english string look odd.

This is the only way I found to completely replace the warning:

<input type="text" required pattern="PATTERN" oninvalid="invalid" oninput="invalid">
/**
 * Shows a custom validity message
 * @param e - event
 */
function invalid(e) {
  if (!/PATTERN/.test(e.target.value)) { // somehow validity.valid returns a wrong value
    e.target.setCustomValidity('INVALID')
  } else {
    e.target.setCustomValidity('')
  }
}

Once the form is validated, the warning keeps popping up until the value matches the pattern. If the input event is just setting setCustomValidity('') as suggested in most other answers, the default warning returns.


Need Your Help

Disable warning in IntelliJ for one line

java intellij-idea warnings line

I have a Java code line where IntelliJ displays a warning. How do I silence the warning in that particular line, without affecting warnings displayed in other lines?

Chrome Developer Tools shows favicon 404 error in Brackets LivePreview

google-chrome debugging google-chrome-devtools developer-tools adobe-brackets

I've just started doing Anthony Alicea's "Javascript: Understanding the Weird Parts" course, and he's using the live preview feature of Brackets to demo his code. The first module is a barebones HTML