Skip to content

Instantly share code, notes, and snippets.

@jerinisready
Created April 20, 2018 06:11
Show Gist options
  • Save jerinisready/20201aa2362387ff9e045472c5c9922c to your computer and use it in GitHub Desktop.
Save jerinisready/20201aa2362387ff9e045472c5c9922c to your computer and use it in GitHub Desktop.
A Way to Customize HTML Error Messages!
function set_custom_error_message(data) {
var elements= $(data[0]);
var message = data[1];
for (var i = 0; i < elements.length; i++) {
var my_element = elements[i];
my_element.oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity(message);
}
};
my_element.oninput = function(e) {
e.target.setCustomValidity("");
}
}
}
document.addEventListener("DOMContentLoaded", function() {
var list_elements = [
['input.input_text', 'Name required with length between 3 and 64'],
['input.input_email', 'Valid Email Required'],
['input.input_mobile_number_2','Required Numbers with length between 8 and 12 (Optional)'],
['textarea.input_message','Dont you have anything to share with us?']
];
list_elements.forEach(set_custom_error_message);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment