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

Question

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

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

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

I found this code in another post.

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

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

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

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