Comment effacer, supprimer ou réinitialiser l'état de validation du formulaire HTML5 après "setCustomValidity (" ... ");"?
Comment effacer, supprimer ou réinitialiser l'état de validation du formulaire HTML5 après setCustomValidity("...");?
La définition d'une chaîne vide, setCustomValidity("");, dans Firefox et Chrome ferme le message d'erreur de validation du formulaire. Je ne veux pas fermer le message d'erreur de validation du formulaire. Je veux réinitialiser le état de validation afin que la réponse suivante puisse être vérifiée et également pour conserver le message d'erreur de validation affiché. Si l'état de validation n'est pas réinitialisé, même la réponse correcte suivante affichera incorrectement un message d'erreur de validation.
Donc, "clair" signifie "proche"?
Si l'argument est la chaîne vide, efface l'erreur personnalisée.
Voici un cas de test de validation:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8"/>
<title>Validation test case</title>
</head>
<body>
<form id="testForm">
<input type="text" id="answer" pattern="[A-Za-z]+" autofocus required/>
<input type="submit" value="OK"/>
</form>
<script>
/*jslint browser: true, vars: true, white: true, maxerr: 50, indent: 4 */
(function ()
{
"use strict";
var form = null;
var answer = null;
var isCorrectAnswer = function (value)
{
return (value === "a");
};
var closeValidation = function (element)
{
// Close the form validation error message if displayed.
element.blur();
element.focus();
};
var validateForm = function (event)
{
event.preventDefault();
event.stopPropagation();
var isValidForm = event.target.checkValidity();
if (isValidForm)
{
if (isCorrectAnswer(answer.value))
{
form.reset();
closeValidation(answer);
console.log("Correct answer.");
alert("Correct answer.");
}
else
{
console.log("Incorrect answer.");
answer.setCustomValidity("Incorrect answer.");
answer.checkValidity();
//answer.setCustomValidity("");
}
}
};
window.addEventListener("DOMContentLoaded", function ()
{
form = document.getElementById("testForm");
answer = document.getElementById("answer");
form.addEventListener("submit", validateForm, false);
}, false);
}());
</script>
</body>
</html>
Tapez une réponse incorrecte, toutes les lettres sauf "a" et appuyez sur Entrée. Tapez la bonne réponse "a" et appuyez sur Entrée.
Sans modification du scénario de test, le comportement est le même dans Opera, Firefox et Chrome (sauf les bogues Chrome). Le message d'erreur de validation persiste malgré si la réponse est correcte ou incorrecte.
Maintenant, une fois que answer.setCustomValidity(""); n'est pas commentée, Opera efface l'erreur de validation personnalisée mais ne ferme pas le message d'erreur de validation, ce que j'attends. Par contre, Firefox et Chrome efface à la fois l'erreur de validation personnalisée et ferme le message d'erreur de validation (bug?).
BOGUE: Chrome ne "vérifie pas la validité ()" lors de son premier appel).
Dans Chrome, answer.checkValidity(); n'affiche pas le message de validation après la première soumission. Les soumissions suivantes affichent le message d'erreur de validation.
http://code.google.com/p/chromium/issues/detail?id=9597
BOGUE: Dans Chrome, le message d'erreur de validation est masqué mais pas fermé lorsque l'entrée est modifiée.
http://code.google.com/p/chromium/issues/detail?id=9597
Opera 11.51 Build 1087
Firefox 6.0.2
Google Chrome 13.0.782.220 m
Un message de validation personnalisé ne s'affiche pas si setCustomValidity () est appelé dans le gestionnaire d'événements "submit".
@tkent:
J'ai confirmé Opera 11.50 a fonctionné comme prévu, mais Firefox 6 et Chrome 14 ne l'ont pas fait).
Cependant, le comportement de Chrome est correct selon la norme.
- Si l'indicateur de méthode soumis depuis submit () n'est pas défini et que l'état de non-validation de l'élément émetteur est faux, validez interactivement les contraintes de forme et examinez le résultat: si le résultat est négatif (la validation de la contrainte a conclu qu'il n'y avait pas de validité et probablement informé l'utilisateur), puis abandonnez ces étapes.
- Si l'indicateur de méthode soumis depuis submit () n'est pas défini, déclenchez un événement simple qui est annulable nommé submit, au formulaire. Si l'action par défaut de l'événement est empêchée (c'est-à-dire si l'événement est annulé), abandonnez ces étapes. Sinon, continuez (en fait, l'action par défaut consiste à effectuer la soumission).
Les navigateurs doivent invoquer la validation interactive AVANT que l'événement "soumettre" ne soit déclenché. Vous devez appeler setCustomValidity () avant l'événement "submit" si vous souhaitez qu'un navigateur affiche un message de validation. Opera semble gérer ces étapes dans un ordre incorrect. Notez que checkValidity () dans votre code n'a de toute façon aucun effet. CheckValidity () n'affiche jamais de message de validation.
http://code.google.com/p/chromium/issues/detail?id=9597
[Bogue 11287] Nouveau: l'appel "setCustomValidity" dans l'élément doit utiliser l'événement "oninput" ...
@Pseudo:
L'appel 'setCustomValidity' dans l'élément doit utiliser l'événement 'oninput' ...
http://lists.w3.org/Archives/Public/public-html/2010Nov/0186.html
Re: [whatwg] Message de l'élément de formulaire non valide
@Mounir Lamouri:
Donc, ce que vous faites, c'est rendre l'élément valide dans l'événement invalide qui est trop tard. Après l'événement non valide, Firefox essaie d'afficher l'interface utilisateur en utilisant le message de validation qui renvoie la chaîne vide lorsque le formulaire est valide. Vous devez annuler l'événement si vous souhaitez ne pas avoir d'interface utilisateur, mais annuler la soumission. Vous devez utiliser onchange/oninput (soulignement ajouté) pour modifier l'état de validité si vous souhaitez que le formulaire soit soumis.
http://www.mail-archive.com/[email protected]/msg23762.html
Le correctif consiste à valider l'entrée avec le gestionnaire d'événements "input" au lieu du gestionnaire d'événements "submit".
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8"/>
<title>Validation test case</title>
</head>
<body>
<form id="testForm">
<input type="text" id="answer" pattern="[A-Za-z]+" autofocus required/>
<input type="submit" value="OK"/>
</form>
<script>
/*jslint browser: true, vars: true, white: true, maxerr: 50, indent: 4 */
(function (console)
{
"use strict";
var form = null;
var answer = null;
var isCorrectAnswer = function (value)
{
return (value === "a");
};
var closeValidation = function (element)
{
// Close the form validation error message if displayed.
element.blur();
element.focus();
};
var validateForm = function (event)
{
event.preventDefault();
event.stopPropagation();
var isValidForm = event.target.checkValidity();
if (isValidForm)
{
console.log("Correct answer.");
closeValidation(answer);
form.reset();
}
else
{
console.log("Incorrect answer.");
}
};
window.addEventListener("DOMContentLoaded", function ()
{
form = document.getElementById("testForm");
answer = document.getElementById("answer");
form.addEventListener("submit", validateForm, false);
answer.addEventListener("input", function ()
{
// Only show custom form validation error message if the value matches the pattern.
if (answer.value.match(new RegExp(answer.getAttribute("pattern"))))
{
answer.setCustomValidity(isCorrectAnswer(answer.value) ? "" : "Incorrect answer.");
}
}, false);
}, false);
}(window.console));
</script>
</body>
</html>