web-dev-qa-db-fra.com

Comment créer un message personnalisé lorsqu'un modèle de saisie requis pour HTML5 ne passe pas?

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"

htmlhtml5
19
user1679941

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/

15
gp.

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>

http://jsfiddle.net/44wSU/1/

14
OBV

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.');
    }
}
2
federicot

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.

2
rajausman haider

J'ai trouvé que, chrome au moins, ajoute au message le titre de l'entrée automatiquement, donc aucun js supplémentaire n'est requis, voir ceci:

 enter image description here

l'entrée ressemble à ceci:

<input type="text" title="Number with max 3 decimals" pattern="^\d+(\.\d{1,3})?$">
1
santiago arizti