web-dev-qa-db-fra.com

Définir le message de validation de champ obligatoire personnalisé HTML5

Validation personnalisée du champ requis

J'ai un formulaire avec plusieurs champs de saisie. J'ai mis des validations html5

<input type="text" name="topicName" id="topicName" required />

quand je soumets le formulaire sans remplir cette zone de texte, il affiche un message par défaut comme

"Please fill out this field"

Quelqu'un peut-il m'aider s'il vous plaît à modifier ce message?

J'ai un code javascript pour l'éditer, mais ça ne marche pas

$(document).ready(function() {
    var elements = document.getElementsByName("topicName");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Please enter Room Topic Title");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})


Email validations personnalisées

J'ai le formulaire HTML suivant

<form id="myform">
    <input id="email" name="email" type="email" />
    <input type="submit" />
</form>


Les messages de validation que je veux.

Champ obligatoire: Veuillez saisir une adresse électronique.
Email incorrect: 'tester @ .com' n'est pas une adresse email valide. ( ici, l'adresse e-mail saisie est affichée dans la zone de texte )

J'ai essayé ça.

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("'" + input.value + "' is not a Valid Email Address.");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}

Cette fonction ne fonctionne pas correctement, avez-vous un autre moyen de le faire? Ce serait apprécié.

javascriptjqueryhtmlhtml5
109
Sumit Bijvani

Extrait de code

Puisque cette réponse a beaucoup retenu l'attention, voici un extrait de code configurable que j'ai créé:

/**
  * @author ComFreek <https://stackoverflow.com/users/603003/comfreek>
  * @link https://stackoverflow.com/a/16069817/603003
  * @license MIT 2013-2015 ComFreek
  * @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek
  * You MUST retain this license header!
  */
(function (exports) {
    function valOrFunction(val, ctx, args) {
        if (typeof val == "function") {
            return val.apply(ctx, args);
        } else {
            return val;
        }
    }

    function InvalidInputHelper(input, options) {
        input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));

        function changeOrInput() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
                input.setCustomValidity("");
            }
        }

        function invalid() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
               input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
            }
        }

        input.addEventListener("change", changeOrInput);
        input.addEventListener("input", changeOrInput);
        input.addEventListener("invalid", invalid);
    }
    exports.InvalidInputHelper = InvalidInputHelper;
})(window);

Usage

→ jsFiddle

<input id="email" type="email" required="required" />

InvalidInputHelper(document.getElementById("email"), {
  defaultText: "Please enter an email address!",

  emptyText: "Please enter an email address!",

  invalidText: function (input) {
    return 'The email address "' + input.value + '" is invalid!';
  }
});

Plus de détails

  • defaultText est affiché initialement
  • emptyText est affiché lorsque l'entrée est vide (a été effacée)
  • invalidText s'affiche lorsque l'entrée est marquée comme non valide par le navigateur (par exemple, lorsque l'adresse e-mail n'est pas valide)

Vous pouvez affecter une chaîne ou une fonction à chacune des trois propriétés.
Si vous affectez une fonction, elle peut accepter une référence à l’élément d’entrée (noeud DOM) et elle doit renvoyer une chaîne qui est puis affiché comme message d'erreur.

Compatibilité

Testé dans:

  • Chrome Canary 47.0.2
  • IE 11
  • Microsoft Edge (en utilisant la version à jour du 28/08/2015)
  • Firefox 40.0.3
  • Opera 31.0

Ancienne réponse

Vous pouvez voir l'ancienne révision ici: https://stackoverflow.com/revisions/16069817/6

115
ComFreek

Vous pouvez simplement y parvenir en utilisant un attribut non valide, consultez ce code de démonstration

<form>
<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put  here custom message')"/>
<input type="submit"/>
</form>

enter image description here

49
Akshay Khale

HTML: 

<form id="myform">
    <input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  type="email" required="required" />
    <input type="submit" />
</form>

JAVASCRIPT: 

function InvalidMsg(textbox) {
    if (textbox.value == '') {
        textbox.setCustomValidity('Required email address');
    }
    else if (textbox.validity.typeMismatch){{
        textbox.setCustomValidity('please enter a valid email address');
    }
    else {
       textbox.setCustomValidity('');
    }
    return true;
}

Démo:

http://jsfiddle.net/patelriki13/Sqq8e/

17
Rikin Patel

Essaye ça:

$(function() {
    var elements = document.getElementsByName("topicName");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("Please enter Room Topic Title");
        };
    }
})

J'ai testé cela dans Chrome et FF et cela a fonctionné dans les deux navigateurs.

16
Levi Botelho

Mec, je n'ai jamais fait ça en HTML 5 mais je vais essayer. Jetez un oeil sur ce violon.

J'ai utilisé jQuery, des événements et propriétés natifs HTML5 et un attribut personnalisé sur la balise input (cela peut poser problème si vous essayez de valider votre code). Je n'ai pas testé tous les navigateurs, mais je pense que cela peut fonctionner.

Voici le code JavaScript de validation de champ avec jQuery:

$(document).ready(function()
{
    $('input[required], input[required="required"]').each(function(i, e)
    {
        e.oninput = function(el)
        {
            el.target.setCustomValidity("");

            if (el.target.type == "email")
            {
                if (el.target.validity.patternMismatch)
                {
                    el.target.setCustomValidity("E-mail format invalid.");

                    if (el.target.validity.typeMismatch)
                    {
                         el.target.setCustomValidity("An e-mail address must be given.");
                    }
                }
            }
        };

        e.oninvalid = function(el)
        {
            el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : "");
        };
    });
});

Agréable. Voici le formulaire simple HTML:

<form method="post" action="" id="validation">
    <input type="text" id="name" name="name" required="required" requiredmessage="Name is required." />
    <input type="email" id="email" name="email" required="required" requiredmessage="A valid E-mail address is required." pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" />

    <input type="submit" value="Send it!" />
</form>

L'attribut requiredmessage est l'attribut personnalisé dont j'ai parlé. Vous pouvez définir votre message pour chaque champ obligatoire car jQuery l'obtiendra lorsqu'il affichera le message d'erreur. Vous n'avez pas besoin de définir chaque champ directement sur JavaScript, jQuery le fait pour vous. Cette expression rationnelle semble être correcte (au moins, elle bloque votre [email protected]! Haha)

Comme vous pouvez le voir sur le violon, je fais une validation supplémentaire de l'événement de formulaire de soumission (ceci continue sur document.ready aussi):

$("#validation").on("submit", function(e)
{
    for (var i = 0; i < e.target.length; i++)
    {
        if (!e.target[i].validity.valid)
        {
            window.alert(e.target.attributes.requiredmessage.value);
            e.target.focus();
            return false;
        }
    }
});

J'espère que cela fonctionne ou vous aide de toute façon.

8
DontVoteMeDown

Cela fonctionne bien pour moi:

jQuery(document).ready(function($) {
    var intputElements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < intputElements.length; i++) {
        intputElements[i].oninvalid = function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                if (e.target.name == "email") {
                    e.target.setCustomValidity("Please enter a valid email address.");
                } else {
                    e.target.setCustomValidity("Please enter a password.");
                }
            }
        }
    }
});

et la forme avec laquelle je l'utilise (tronqué):

<form id="welcome-popup-form" action="authentication" method="POST">
    <input type="hidden" name="signup" value="1">
    <input type="email" name="email" id="welcome-email" placeholder="Email" required></div>
    <input type="password" name="passwd" id="welcome-passwd" placeholder="Password" required>
    <input type="submit" id="submitSignup" name="signup" value="SUBMIT" />
</form>

enter image description here

6
davidcondrey

Vous pouvez faire cela en configurant un écouteur d'événements pour le 'non valide' sur toutes les entrées du même type, ou juste une, en fonction de vos besoins, puis en configurant le message approprié.

[].forEach.call( document.querySelectorAll('[type="email"]'), function(emailElement) {
    emailElement.addEventListener('invalid', function() {
        var message = this.value + 'is not a valid email address';
        emailElement.setCustomValidity(message)
    }, false);

    emailElement.addEventListener('input', function() {
        try{emailElement.setCustomValidity('')}catch(e){}
    }, false);
    });

Le deuxième élément du script, le message de validité sera réinitialisé, car sinon il ne sera pas possible de soumettre le formulaire: par exemple, cela empêchera le message d'être déclenché même lorsque l'adresse e-mail a été corrigée.

De plus, vous n'avez pas besoin de configurer le champ de saisie comme requis, car le 'non valide' sera déclenché une fois que vous aurez commencé à saisir l'entrée.

Voici un violon pour ça: http://jsfiddle.net/napy84/U4pB7/2/ J'espère que ça vous aidera!

5
Mimo

Il suffit d’obtenir l’élément et d’utiliser la méthode setCustomValidity.

Exemple

var foo = document.getElementById('foo');
foo.setCustomValidity(' An error occurred');
4
LuisRBarreras

Utilisez l'attribut "title" dans chaque balise d'entrée et écrivez un message dessus

4
iglesiasedd

vous pouvez simplement simplement utiliser l'attribut oninvalid = ", avec le bingding le this.setCustomValidity () eventListener!

Voici mes codes de démo! (Vous pouvez l'exécuter pour vérifier!) enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oninvalid</title>
</head>
<body>
    <form action="https://www.google.com.hk/webhp?#safe=strict&q=" method="post" >
        <input type="email" placeholder="[email protected]" required="" autocomplete="" autofocus="" oninvalid="this.setCustomValidity(`This is a customlised invalid warning info!`)">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

lien de référence

http://caniuse.com/#feat=form-validation

https://www.w3.org/TR/html51/sec-forms.html#sec-constraint-validation

3
xgqfrms

Vous pouvez ajouter ce script pour afficher votre propre message.

 <script>
     input = document.getElementById("topicName");

            input.addEventListener('invalid', function (e) {
                if(input.validity.valueMissing)
                {
                    e.target.setCustomValidity("Please enter topic name");
                }
//To Remove the sticky error message at end write


            input.addEventListener('input', function (e) {
                e.target.setCustomValidity('');
            });
        });

</script>

Pour d'autres validations telles que la non-concordance de modèle, vous pouvez ajouter une condition iftier

comme

else if (input.validity.patternMismatch) 
{
  e.target.setCustomValidity("Your Message");
}

il existe d’autres conditions de validité telles que rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, valide

1
Engineer