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

user_1347094 0
Viewed 30036

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?

html
4 Answers

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.

user_59506260
Related