web-dev-qa-db-fra.com

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

Par exemple, j'ai un textfield. Le champ est obligatoire, seuls des chiffres sont requis et la longueur de la valeur doit être égale à 10. Lorsque j'essaie de soumettre un formulaire avec une valeur de longueur égale à 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. Est-il possible de créer des fichiers de propriétés et de définir dans ces fichiers des messages d'erreur personnalisés?
html5validation
137
emilan

J'ai trouvé un bug sur Ankur qui répond 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 observé lorsque vous définissez des données d'entrée non valides, corrigez ensuite l'entrée et envoyez le formulaire. Oops! tu ne peux pas faire ça. Je l'ai testé sur firefox et chrome

205
Mahoor13

Lorsque vous utilisez pattern =, tout ce que vous mettez dans l'attribut du titre sera affiché. Aucun JS requis n'est nécessaire:

<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />
92
HTF
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />

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

33
Ankur Loriya

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

15
Rikin Patel

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();
});
14
Luca Fagioli

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

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

il suffit de définir le message personnalisé sur un espace vide

13
user3894381

vous pouvez les changer via l'API de validation de contrainte: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

si vous voulez une solution simple, vous pouvez vous rendre sur civem.js, Messages d'erreur relatifs à la validation des entrées personnalisées. Téléchargez la version JavaScript ici: https://github.com/javanto/civem.js démonstration en direct ici: - http://jsfiddle.net/hleinone/njSbH/

11
albert

SetCustomValidity vous permet de modifier le message de validation par défaut. Voici un exemple simple d'utilisation.

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

J'ai trouvé un bug sur la réponse de Mahoor13, il ne fonctionne pas en boucle et je l'ai donc 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.

3
Darshan Gorasia

J'ai trouvé un moyen accidentellement Maintenant: vous pouvez avoir besoin d'utiliser ceci: data-error: ""

<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/>
2
Mohammad Shojaa

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.

2
Abibullah Rahamathulah

Comme vous pouvez le voir ici:

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

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

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

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 valide des données,

onkeyup="setCustomValidity('')"

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

1
Umesh Patil

C'est un travail 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')"
0
Sahan Pasindu Nirmal

vous pouvez simplement utiliser "novalidate" à partir de la balise <form>

cliquez ici pour plus de détails

0
sadeq qane