Validation personnalisée du champ obligatoire

J'ai un formulaire avec de nombreux 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, il affiche un message par défaut comme

"Please fill out this field"

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

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

Email de validations personnalisées

J'ai le formulaire HTML suivant

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

Messages de validation que je veux aimer.

Champ obligatoire: Veuillez saisir une adresse
e-mail Mauvaise adresse e-mail: «testing @ .com» n'est pas une adresse e-mail valide. ( ici, l'adresse e-mail saisie affichée dans la zone de texte )

J'ai essayé ceci.

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

Extrait de code

Étant donné que cette réponse a attiré beaucoup d'attention, voici un bel extrait de code configurable que j'ai trouvé:

/**
  * @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 s'affiche initialement
• emptyText s'affiche lorsque l'entrée est vide (a été effacée)
• invalidText s'affiche lorsque l'entrée est marquée comme invalide par le navigateur (par exemple, lorsqu'il ne s'agit pas d'une adresse e-mail 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 (nœud DOM) et elle doit renvoyer une chaîne qui est alors affichée comme message d'erreur.

Compatibilité

Testé en:

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

Ancienne réponse

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

Vous pouvez simplement y parvenir en utilisant l'attribut oninvalid, consultez ce code de démonstration

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

Démo Codepen: https://codepen.io/akshaykhale1992/pen/yLNvOqP

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/

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.

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

J'ai utilisé des événements et propriétés natifs jQuery, HTML5 et un attribut personnalisé sur la balise d'entrée (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 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 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 requiredmessageest l'attribut personnalisé dont j'ai parlé. Vous pouvez définir votre message pour chaque champ obligatoire, car jQuery en obtiendra lorsqu'il affichera le message d'erreur. Vous n'êtes pas obligé de définir chaque champ directement sur JavaScript, jQuery le fait pour vous. Cette regex semble aller bien (au moins ça bloque votre [email protected]! Haha)

Comme vous pouvez le voir sur fiddle, je fais une validation supplémentaire de l'événement de formulaire d'envoi ( 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 toute façon.

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>

Vous pouvez le faire en configurant un écouteur d'événement pour «invalide» sur toutes les entrées du même type, ou juste une, selon ce dont vous avez besoin, 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 morceau du script, le message de validité sera réinitialisé, sinon il ne sera pas possible de soumettre le formulaire: par exemple, cela empêche le message d'être déclenché même lorsque l'adresse e-mail a été corrigée.

De plus, vous n'avez pas à configurer le champ de saisie comme requis, car le 'invalide' sera déclenché une fois que vous commencerez à taper dans l'entrée.

Voici un violon pour cela: http://jsfiddle.net/napy84/U4pB7/2/ J'espère que cela aide!

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

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');

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

Voici mes codes de démonstration! (Vous pouvez l'exécuter pour vérifier!)

<!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

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 comme l'incompatibilité de modèle, vous pouvez ajouter une condition if else supplémentaire

comme

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

il existe d'autres conditions de validité comme rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, valid