How To Change Warning Text When Pattern Is Used In Input?

When I use pattern in input like this: I receive popup warning with text. How can I easily change this text?

Solution 1:

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

Solution 2:

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

Solution 3:

<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...

Solution 4:

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?

Solution 5:

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.