J'ai le suivant:
<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />
Lorsque je n'entre qu'un caractère, je reçois un message disant:
"Please match the requested format"
Est-il possible de personnaliser ce message en disant "Entrez au moins 5 caractères"
Utilisez: setCustomValidity
La première fonction définit un message d'erreur personnalisé:
$(function(){
$("input[name=Password]")[0].oninvalid = function () {
this.setCustomValidity("Please enter at least 5 characters.");
};
});
La deuxième fonction désactive le message personnalisé. Sans cette fonction, le message d'erreur personnalisé ne s'éteindra pas comme le message par défaut:
$(function(){
$("input[name=Password]")[0].oninput= function () {
this.setCustomValidity("");
};
});
P.S. vous pouvez utiliser oninput pour tous les types d'entrée qui ont une entrée de texte.
Pour l’entrée type="checkbox"
, vous pouvez utiliser onclick pour déclencher le déclenchement de l’erreur:
$(function(){
$("input[name=CheckBox]")[0].onclick= function () {
this.setCustomValidity("");
};
});
Pour saisir type="file"
, vous devez utiliser change.
Le reste du code dans la fonction de changement consiste à vérifier si l’entrée de fichier n’est pas vide.
P.S. Cette vérification de fichier vide ne concerne qu'un fichier, n'hésitez pas à utiliser la méthode de vérification de fichier de votre choix et à vérifier si le type de fichier correspond à vos goûts.
Fonction de traitement des messages personnalisés d'entrée de fichier:
$("input[name=File]").change(function () {
let file = $("input[name=File]")[0].files[0];
if(this.files.length){
this.setCustomValidity("");
}
else {
this.setCustomValidity("You forgot to add your file...");
}
//this is for people who would like to know how to check file type
function FileType(filename) {
return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;
}
if(FileType(file.name)!="pdf"||FileType(file.name)!="PDF"){
this.setCustomValidity("Your file type has to be PDF");
//this is for people who would like to check if file size meets requirements
else if(file.size/1048576>2){
// file.size divided by 1048576 makes file size units MB file.size to megabytes
this.setCustomValidity("File hast to be less than 2MB");
}
else{
this.setCustomValidity("");
}
});//file input custom message handling function
Attribut de formulaire HTML5 requis. Définir un message de validation personnalisé?
JSFiddle: http://jsfiddle.net/yT3w3/
Solution non JQuery:
function attachHandler(el, evtname, fn) {
if (el.addEventListener) {
el.addEventListener(evtname, fn.bind(el), false);
} else if (el.attachEvent) {
el.attachEvent('on' + evtname, fn.bind(el));
}
}
attachHandler(window, "load", function(){
var ele = document.querySelector("input[name=Password]");
attachHandler(ele, "invalid", function () {
this.setCustomValidity("Please enter at least 5 characters.");
this.setCustomValidity("");
});
});
JSFiddle: http://jsfiddle.net/yT3w3/2/
Vous pouvez faire un chemin rapide et sale avec cette astuce:
<form>
<label for="username">Username:</label><br/>
<input id="username" type="text" pattern=".{6,}" autofocus required title="Please enter at least 5 characters">
<input id="submit" type="submit" value="create">
</form>
Vous devez utiliser la fonction setCustomValidity
. Le problème, c'est que cela ne garantirait qu'un message personnalisé aux utilisateurs qui ont JavaScript activé.
<input required pattern=".{6,}" ... oninput="check(this)">
^^^^^^^^^^^^^^^^^^^^^
function check (input) {
if (input.value.search(new RegExp(input.getAttribute('pattern'))) >= 0) {
// Input is fine. Reset error message.
input.setCustomValidity('');
} else {
input.setCustomValidity('Your custom message here.');
}
}
C'est très simple, sans validation javascript ou jQuery. Nous pouvons y arriver en HTML5
Supposons que nous ayons un champ HTML:
<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />
Il suffit de changer le HTML comme
<input required pattern=".{6,}" class="big medium-margin" title="Please enter at least 5 characters." name="Password" placeholder="Password" size="25" type="password" />
Si vous observez, ajoutez simplement title = "Message d'erreur"
Maintenant, chaque fois que le formulaire sera posté, les messages donnés apparaîtront et nous n’avions pas besoin de JavaScript ni de la vérification jQuery . Cette solution fonctionne pour moi.