Html – How to change or remove HTML5 form validation default error messages

htmlvalidation

For example I have a textfield. The field is mandatory, only numbers are required and length of value must be 10. When I try to submit form with value which length is 5, the default error message appears: Please match the requested format

<input type="text" required="" pattern="[0-9]{10}" value="">
  1. How can I change HTML 5 form validation errors default messages?
  2. If 1st point can be done, so Is there a way to create some property files and set in that files custom error messages?

Best Answer

This is the JavaScript solution:

 <input type="text"
    pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity('Please enter Alphabets.')"
    onchange="try{setCustomValidity('')}catch(e){}" />

The "onchange" event needs when you set an invalid input data, then correct the input and send the form again. I've tested it on Firefox, Chrome and Safari.

But for Modern Browsers:

Modern browsers didn't need any JavaScript for validation. Just do it like this:

<input type="text"
    pattern="[a-zA-Z]+"
    title="Please enter Alphabets."
    required="" />