Chrome ', please match the requested confirmation email

Question

I play with HTML 5 validation and localization, and I managed to get some code that allows me to localize HTML 5 validation error messages (see below). My problem is that in Chrome, when matching with a template, you still pop up in English (or, I think, in any language in which Chrome is installed) ', please match the requested format. How do you suppress this popup so I can just use my own verification 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(""); }; } }); 

Answer 1

The default browser action is to display a pop-up message. You must use e.preventDefault(); to prevent it from floating.

  $(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 really can put e.preventDefault() right after if (!e.target.validity.valid) { , but I noticed that you did not have default: in your switch, so I assumed that you did not want it there . In any case, you can use e.preventDefault() inside each individual case: where you want, or you can put it after the if . What ever best suits your purpose.

Answer 2

If you use your own validation, you can prevent any built-in validation of the HTML5 browser by setting the novalidate attribute of the form to "update", for example

 <form name='testForm' method='POST' action='#' novalidate="novalidate"> 

This will prevent the browser from using HTML5 automatic validation.

Answer 3

Using jQuery:

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

Answer 4

Creating an answer @ michael-angstadt. You can automatically add the novalidate attribute to your forms by adding this jQuery:

 $("form").attr('novalidate', 'novalidate');