I am playing around with HTML 5 validation and localization and have managed to get some code working that allows me to localize the HTML 5 validation error messages (see below). My problem is, in Chrome when matching against a pattern you still get a pop up in English (or I guess whatever language you have Chrome set up in) 'please match the requested format'. How do you supress this pop up so that I can just use my own validation messages?
$(document).ready(function () {
var elementsInput = document.getElementsByTagName("input");
var elementsTextArea = document.getElementsByTagName("textarea");
for (var i = 0; i < elementsInput.length; i++) {
elementsInput[i].oninvalid = function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
switch (e.target.name) {
case "Name":
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Anna nimesi");
} else {
e.target.setCustomValidity("Please enter a Name");
}
break;
case "EmailAddress":
if (e.target.validity.valueMissing) {
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Anna sähköpostiosoitteesi");
} else {
e.target.setCustomValidity("Please enter an Email Address");
}
}
else if (e.target.validity.patternMismatch) {
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Virheellinen sähköpostiosoite");
} else {
e.target.setCustomValidity("Invalid Email Address");
}
}
break;
case "PhoneNumber":
if (e.target.validity.valueMissing) {
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Anna puhelinnumerosi");
} else {
e.target.setCustomValidity("Please enter a Phone Number");
}
}
else if (e.target.validity.patternMismatch) {
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Virheellinen puhelinnumero");
} else {
e.target.setCustomValidity("Invalid Phone Number");
}
}
break;
}
}
};
elementsInput[i].oninput = function (e) {
e.target.setCustomValidity("");
};
}
for (var j = 0; j < elementsTextArea.length; j++) {
elementsTextArea[j].oninvalid = function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
switch (e.target.name) {
case "Details":
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Täytäthän yksityiskohdat");
} else {
e.target.setCustomValidity("Please enter Details");
}
break;
}
}
};
elementsTextArea[j].oninput = function (e) {
e.target.setCustomValidity("");
};
}
});
I am playing around with HTML 5 validation and localization and have managed to get some code working that allows me to localize the HTML 5 validation error messages (see below). My problem is, in Chrome when matching against a pattern you still get a pop up in English (or I guess whatever language you have Chrome set up in) 'please match the requested format'. How do you supress this pop up so that I can just use my own validation messages?
$(document).ready(function () {
var elementsInput = document.getElementsByTagName("input");
var elementsTextArea = document.getElementsByTagName("textarea");
for (var i = 0; i < elementsInput.length; i++) {
elementsInput[i].oninvalid = function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
switch (e.target.name) {
case "Name":
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Anna nimesi");
} else {
e.target.setCustomValidity("Please enter a Name");
}
break;
case "EmailAddress":
if (e.target.validity.valueMissing) {
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Anna sähköpostiosoitteesi");
} else {
e.target.setCustomValidity("Please enter an Email Address");
}
}
else if (e.target.validity.patternMismatch) {
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Virheellinen sähköpostiosoite");
} else {
e.target.setCustomValidity("Invalid Email Address");
}
}
break;
case "PhoneNumber":
if (e.target.validity.valueMissing) {
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Anna puhelinnumerosi");
} else {
e.target.setCustomValidity("Please enter a Phone Number");
}
}
else if (e.target.validity.patternMismatch) {
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Virheellinen puhelinnumero");
} else {
e.target.setCustomValidity("Invalid Phone Number");
}
}
break;
}
}
};
elementsInput[i].oninput = function (e) {
e.target.setCustomValidity("");
};
}
for (var j = 0; j < elementsTextArea.length; j++) {
elementsTextArea[j].oninvalid = function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
switch (e.target.name) {
case "Details":
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Täytäthän yksityiskohdat");
} else {
e.target.setCustomValidity("Please enter Details");
}
break;
}
}
};
elementsTextArea[j].oninput = function (e) {
e.target.setCustomValidity("");
};
}
});
- possible duplicate of HTML5 form required attribute. Set custom validation message? – jbabey Commented Oct 24, 2012 at 19:59
- Not a duplicate of that question – user517406 Commented Oct 24, 2012 at 20:18
- I hope I was able to answer your question :) – Swivel Commented Oct 31, 2012 at 18:53
- I'm not sure but you probally have to use e.preventDefault() but can't you check first with e.type if it comes from the popup? – Captain Obvious Commented Nov 8, 2012 at 19:40
- How would I check that the source is the popup? – user517406 Commented Nov 13, 2012 at 21:13
4 Answers
Reset to default 8The default browser action is to display a popup message. You should use e.preventDefault(); to prevent it from popping up.
$(document).ready(function () {
var elementsInput = document.getElementsByTagName("input");
var elementsTextArea = document.getElementsByTagName("textarea");
for (var i = 0; i < elementsInput.length; i++) {
elementsInput[i].oninvalid = function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
switch (e.target.name) {
case "Name":
e.preventDefault();
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Anna nimesi");
} else {
e.target.setCustomValidity("Please enter a Name");
}
break;
case "EmailAddress":
e.preventDefault();
if (e.target.validity.valueMissing) {
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Anna sähköpostiosoitteesi");
} else {
e.target.setCustomValidity("Please enter an Email Address");
}
}
else if (e.target.validity.patternMismatch) {
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Virheellinen sähköpostiosoite");
} else {
e.target.setCustomValidity("Invalid Email Address");
}
}
break;
case "PhoneNumber":
e.preventDefault();
if (e.target.validity.valueMissing) {
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Anna puhelinnumerosi");
} else {
e.target.setCustomValidity("Please enter a Phone Number");
}
}
else if (e.target.validity.patternMismatch) {
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Virheellinen puhelinnumero");
} else {
e.target.setCustomValidity("Invalid Phone Number");
}
}
break;
}
}
};
elementsInput[i].oninput = function (e) {
e.target.setCustomValidity("");
};
}
for (var j = 0; j < elementsTextArea.length; j++) {
elementsTextArea[j].oninvalid = function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
switch (e.target.name) {
case "Details":
e.preventDefault();
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Täytäthän yksityiskohdat");
} else {
e.target.setCustomValidity("Please enter Details");
}
break;
}
}
};
elementsTextArea[j].oninput = function (e) {
e.target.setCustomValidity("");
};
}
});
Theoretically you can really put the e.preventDefault() right after if (!e.target.validity.valid) { but I noticed you didn't have a default: in your Switch, so I assumed you didn't want it there. In either case, you can use e.preventDefault() inside each individual case: where you want it, or you can put it after the if statement. Which ever suits your purpose better.
If you're running your own validation you can prevent any built-in HTML5 browser validation by setting the novalidate attribute of the form to "novalidate" like
<form name='testForm' method='POST' action='#' novalidate="novalidate">
This will tell the browser to prevent applying HTML5 auto-validation.
With jQuery:
$('input').on("invalid", function(e) {
e.preventDefault();
});
Building off @michael-angstadt answer. You can automatically add the novalidate attribute to your forms by adding this jQuery:
$("form").attr('novalidate', 'novalidate');