Search code examples
htmlvalidation

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


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 form validation errors default messages?
  2. If the 1st point can be done, is there a way to create some property files and set in that files custom error messages?

Solution

  • 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="" />