How can I change or remove HTML5 form validation default error messages?

html validation
emilan picture emilan · Apr 28, 2012 · Viewed 190.9k times · Source

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?

Answer

Mahoor13 picture Mahoor13 · Sep 11, 2012

I found a bug on Ankur answer and I've fixed it with this correction:

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

The bug seen when you set an invalid input data, then correct the input and send the form. oops! you can't do this. I've tested it on firefox and chrome

Related questions

How to allow only numeric (0-9) in HTML inputbox using jQuery?

I am creating a web page where I have an input text field in which I want to allow only numeric characters like (0,1,2,3,4,5...9) 0-9. How can I do this using jQuery?

Read More
Number input type that takes only integers?

I'm using the jQuery Tools Validator which implements HTML5 validations through jQuery. It's been working great so far except for one thing. In the HTML5 specification, the input type "number" can have both integers and floating-point numbers. This seems incredibly …

Read More
HTML5 form required attribute. Set custom validation message?

I've got the following HTML5 form: http://jsfiddle.net/nfgfP/ Currently when I hit enter when they're both blank, a popup box appears saying "Please fill out this field". How would I change that default message to "This field cannot …

Read More