Comment puis-je modifier ou supprimer les messages d'erreur par défaut de validation de formulaire HTML5?

Par exemple, j'ai un fichier textfield. Le champ est obligatoire, seuls les nombres sont requis et la longueur de la valeur doit être de 10. Lorsque j'essaie de soumettre un formulaire avec une valeur de 5, le message d'erreur par défaut apparaît:Please match the requested format

<input type="text" required="" pattern="[0-9]{10}" value="">

1. Comment puis-je modifier les messages par défaut des erreurs de validation de formulaire HTML 5?
2. Si le 1er point peut être fait, existe-t-il un moyen de créer des fichiers de propriétés et de définir dans ces fichiers des messages d'erreur personnalisés?

J'ai trouvé un bug sur la réponse d'Ankur et je l'ai corrigé avec cette correction:

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

Le bogue vu lorsque vous définissez une donnée d'entrée invalide, puis corrigez l'entrée et envoyez le formulaire. Oups! vous ne pouvez pas faire ça. Je l'ai testé sur Firefox et Chrome

Lorsque vous utilisez pattern = il affichera tout ce que vous mettez dans l'attribut titre, donc aucun JS n'est requis, faites simplement:

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

J'ai trouvé ce code dans un autre article.

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

Pour empêcher le message de validation du navigateur d'apparaître dans votre document, avec jQuery:

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

vous pouvez supprimer cette alerte en procédant comme suit:

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

définissez simplement le message personnalisé sur un espace vide

vous pouvez les modifier via l'api de validation des contraintes: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

Si vous voulez une solution simple, vous pouvez basculer civem.js, Messages d'erreur de validation d'entrée personnalisée Téléchargement de la bibliothèque JavaScript ici: https://github.com/javanto/civem.js démo en direct ici: http://jsfiddle.net/ hleinone / njSbH /

Le setCustomValidity vous permet de modifier le message de validation par défaut. Voici un exemple simple de son utilisation.

var age  =  document.getElementById('age');
    age.form.onsubmit = function () {
    age.setCustomValidity("This is not a valid age.");
 };

J'ai trouvé un moyen par accident maintenant: vous pouvez utiliser ceci: erreur de données: ""

<input type="username" class="form-control" name="username" value=""
placeholder="the least 4 character"
data-minlength="4" data-minlength-error="the least 4 character"
data-error="This is a custom Errot Text fot patern and fill blank"
max-length="15" pattern="[A-Za-z0-9]{4,}"
title="4~15 character" required/>

J'ai trouvé un bug sur la réponse Mahoor13, cela ne fonctionne pas en boucle, donc je l'ai corrigé avec cette correction:

HTML:

<input type="email" id="eid" name="email_field" oninput="check(this)">

Javascript:

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}  

Il fonctionnera parfaitement en boucle.

C'est un très bon lien que j'ai trouvé sur la vérification de divers attributs des validations html5.

https://dzone.com/articles/custom-validation-messages

J'espère que ça aide quelqu'un.

Comme vous pouvez le voir ici:

html5 oninvalid ne fonctionne pas après avoir corrigé le champ de saisie

Est-ce bon de vous mettre de cette façon, car lorsque vous corrigez l'erreur disparaît le message d'avertissement.

<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />

Pour définir un message d'erreur personnalisé pour l'utilisation de la validation HTML 5,

oninvalid="this.setCustomValidity('Your custom message goes here.')"

et pour supprimer ce message lorsque l'utilisateur entre une utilisation de données valide,

onkeyup="setCustomValidity('')"

J'espère que cela fonctionne pour toi. Prendre plaisir ;)

Cela fonctionne pour moi dans Chrome

    <input type="text" name="product_title" class="form-control" 
required placeholder="Product Name" value="" pattern="([A-z0-9À-ž\s]){2,}"
oninvalid="setCustomValidity('Please enter on Producut Name at least 2 characters long')"

vous pouvez simplement utiliser "novalidate" pour la balise <form>

cliquez ici pour plus de détails