Définir un message personnalisé de validation des champs obligatoires HTML5

Question

Validation personnalisée des champs obligatoires

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

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

lorsque je soumets le formulaire sans remplir cette zone de texte, un message par défaut s'affiche comme suit

"Please fill out this field"

Quelqu'un peut-il m'aider à modifier ce message ?

J'ai un code javascript pour le modifier, mais il ne fonctionne 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("");
        };
    }
})

Validations personnalisées des e-mails

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 comme.

Champ obligatoire : Veuillez entrer votre adresse e-mail
Mauvais courriel : 'testing@.com' n'est pas une adresse électronique valide. ( ici, l'adresse électronique saisie est affichée dans la zone de texte )

J'ai essayé.

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 ? Nous vous en serions reconnaissants.

Answer 1

Extrait de code

Puisque cette réponse a suscité beaucoup d'attention, voici un petit extrait 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);

Utilisation

→ 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 s'affiche initialement
• emptyText s'affiche lorsque l'entrée est vide (a été effacée)
• invalidText est affiché lorsque l'entrée est marquée comme invalide par le navigateur (par exemple lorsqu'il ne s'agit pas d'une adresse électronique valide).

Vous pouvez affecter une chaîne ou une fonction à chacune des trois propriétés.
Si vous assignez une fonction, elle peut accepter une référence à l'élément d'entrée (nœud DOM) et elle debe renvoie une chaîne de caractères qui est ensuite affichée comme message d'erreur.

Compatibilité

Testé dans :

• Chrome Canary 47.0.2
• IE 11
• Microsoft Edge (en utilisant la version actualisée au 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

Answer 2

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/

Answer 3

Essayez ç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");
        };
    }
})

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

Answer 4

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

J'ai utilisé quelques jQuery, des événements et propriétés natifs de 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é dans tous les navigateurs mais je pense que cela peut fonctionner.

Voici le code JavaScript de validation des champs 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 : "");
        };
    });
});

Joli. Voici le formulaire html simple :

<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 y définir votre message pour chaque champ obligatoire, car jQuery s'en inspirera pour afficher le message d'erreur. Vous n'avez pas besoin de définir chaque champ directement sur JavaScript, jQuery le fait pour vous. Cette regex semble être bonne (au moins elle bloque votre testing@.com ! haha)

Comme vous pouvez le voir sur le fiddle, je fais une validation supplémentaire de l'événement submit form( cela va aussi sur document.ready ) :

$("#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 quelque manière que ce soit.

Answer 5

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 le formulaire avec lequel 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>