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

Question

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?

Answer 1

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

Answer 2

When using pattern= it will display whatever you put in the title attrib, so no JS required just do:

<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />

Answer 3

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

I found this code in another post.

Answer 4

HTML:

<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  />

JAVASCRIPT :

function InvalidMsg(textbox) {

     if(textbox.validity.patternMismatch){
        textbox.setCustomValidity('please enter 10 numeric value.');
    }    
    else {
        textbox.setCustomValidity('');
    }
    return true;
}

Fiddle Demo

Answer 5

To prevent the browser validation message from appearing in your document, with jQuery:

$('input, select, textarea').on("invalid", function(e) {
    e.preventDefault();
});

Answer 6

you can remove this alert by doing following:

<input type="text" pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity(' ')"
/>

just set the custom message to one blank space

Answer 7

you can change them via constraint validation api: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

if you want an easy solution, you can rock out civem.js, Custom Input Validation Error Messages JavaScript lib download here: https://github.com/javanto/civem.js live demo here: http://jsfiddle.net/hleinone/njSbH/

Answer 8

I Found a way Accidentally Now: you can need use this: data-error:""

<input type="username" class="form-control" name="username" value=""
placeholder="the least 4 character"
data-minlength="4" data-minlength-error="the least 4 character"
data-error="This is a custom Errot Text fot patern and fill blank"
max-length="15" pattern="[A-Za-z0-9]{4,}"
title="4~15 character" required/>

Answer 9

The setCustomValidity let you change the default validation message.Here is a simple exmaple of how to use it.

var age  =  document.getElementById('age');
    age.form.onsubmit = function () {
    age.setCustomValidity("This is not a valid age.");
 };

Answer 10

I found a bug on Mahoor13 answer, it's not working in loop so I've fixed it with this correction:

HTML:

<input type="email" id="eid" name="email_field" oninput="check(this)">

Javascript:

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}  

It will perfectly running in loop.

Answer 11

This is work for me in Chrome

<input type="text" name="product_title" class="form-control" 
    required placeholder="Product Name" value="" pattern="([A-z0-9À-ž\s]){2,}"
    oninvalid="setCustomValidity('Please enter on Producut Name at least 2 characters long')" />

Answer 12

To set custom error message for HTML validation use,

oninvalid="this.setCustomValidity('Your custom message goes here.')"

and to remove this message when user enters valid data use,

onkeyup="setCustomValidity('')"

Answer 13

As you can see here:

html5 oninvalid doesn't work after fixed the input field

Is good to you put in that way, for when you fix the error disapear the warning message.

<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />