Le message de validation du format 'correspond au format demandé'

Question

Je suis en train de jouer avec la validation et la localisation HTML 5 et j'ai réussi à obtenir du code qui me permet de localiser les messages d'erreur de validation HTML 5 (voir ci-dessous). Mon problème est le suivant: dans Chrome, lorsque vous effectuez une correspondance avec un motif, vous obtenez toujours un pop-up en anglais (ou je suppose que quelle que soit la langue dans laquelle Chrome est installé) "s'il vous plaît correspondre au format demandé". Comment supprimez-vous cette fenêtre pour pouvoir utiliser mes propres messages de validation?

 $(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

L'action par défaut du navigateur est d'afficher un message contextuel. Vous devriez utiliser e.preventDefault(); pour l'empêcher de surgir.

$(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(""); 
      }; 
     } 
    }); 

Théoriquement vous pouvez vraiment mettre le e.preventDefault() juste après if (!e.target.validity.valid) { mais je remarqué que vous ne disposez pas d'un default: dans votre Switch, donc je suppose que tu ne voulais pas là. Dans les deux cas, vous pouvez utiliser e.preventDefault() à l'intérieur de chaque individu case: où vous le souhaitez, ou vous pouvez le mettre après l'instruction if. Ce qui convient le mieux à votre objectif.

Answer 2

Si vous utilisez votre propre validation, vous pouvez éviter toute validation intégrée du navigateur HTML5 en définissant l'attribut novalidate de la forme à « novalidate » comme

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

Ceci indiquera au navigateur pour empêcher l'application Validation automatique HTML5

Answer 3

Avec jQuery:

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

Answer 4

Construire hors @ réponse michael-Angstadt. Vous pouvez ajouter automatiquement l'attribut novalidate à vos formulaires en ajoutant cette jQuery:

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