Comment faire pour effacer, supprimer ou réinitialiser le HTML5 formulaire de validation de l'état après “setCustomValidity(”...“);”?

Comment faire pour effacer, supprimer ou réinitialiser le HTML5 formulaire de validation de l'état après setCustomValidity("...");?

Paramètre une chaîne vide, setCustomValidity("");, dans Firefox et Chrome se ferme le formulaire de message d'erreur de validation. Je ne veux pas fermer le formulaire de message d'erreur de validation. Je veux réinitialiser l'état de validation de sorte que la réponse suivante peut être vérifiée et aussi pour garder l'affichage de message d'erreur de validation. Si l'état de validation n'est pas réinitialisé, alors même que la prochaine, bonne réponse, à tort, afficher un message d'erreur de validation.

Donc, en quelque sorte, "clair" signifie "fermer"?

Si l'argument est la chaîne vide, efface l'erreur personnalisé.

http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#the-constraint-validation-api

Ici est un test de validation de cas:

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

Type une réponse incorrecte, des lettres de son nom(s), mais "une", et appuyez sur Enter.
Type de la réponse correcte "a", et appuyez sur Enter.

En l'absence de modifications du cas de test, le comportement est le même dans l'Opéra, Firefox et Chrome (à l'exception du Chrome bugs). La validation de message d'erreur persiste, peu importe si la réponse est correcte ou incorrecte.

Maintenant, après answer.setCustomValidity(""); est retirée, l'Opéra efface la validation personnalisée d'erreur, mais ne pas fermer le message d'erreur de validation, qui est ce que j'attends. D'autre part, Firefox et Chrome à la fois clair la validation personnalisée d'erreur et fermez le message d'erreur de validation (bug?).

BUG: Chrome n'est pas "checkValidity()" lors de la première invoquée.

En Chrome, answer.checkValidity(); n'affiche pas le message de validation après la première soumettre. Ultérieure soumet afficher le message d'erreur de validation.

http://code.google.com/p/chromium/issues/detail?id=95970

BUG: Dans Chrome, le message d'erreur de validation est effacé mais pas fermé lorsque l'entrée est changé.

http://code.google.com/p/chromium/issues/detail?id=95973

Opéra 11.51 Construire 1087

Firefox 6.0.2

Google Chrome 13.0.782.220 m

InformationsquelleAutor XP1 | 2011-09-09
  1. 13

    Une validation personnalisée message n'est pas affiché si setCustomValidity() est appelée dans "soumettre" gestionnaire d'événement.

    @tkent:

    J'ai confirmé Opera 11.50 travaillé comme votre attente, mais Firefox 6 et
    Chrome 14 n'a pas.

    Cependant, google Chrome, le comportement est correct conformément à la norme.

    http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm

    1. Si le soumis de méthode submit() indicateur n'est pas défini, et le
      auteur élément du pas-de valider l'état est faux, ensuite, de façon interactive
      valider les contraintes de forme et d'examiner le résultat: si le résultat
      est négatif (la contrainte de validation a conclu qu'il y avait
      des champs invalides et probablement informe l'utilisateur de cela), alors abandonner
      ces étapes.
    2. Si le soumis de méthode submit() indicateur n'est pas défini, alors le feu
      un simple événement qui est annulable nommé soumettre, à la forme. Si l'
      l'événement par défaut d'action est empêchée (c'est à dire si l'événement est annulé)
      alors abandonner ces étapes. Sinon, continuer (dans les faits, la valeur par défaut
      l'action est à effectuer la présentation).

    Navigateurs doivent invoquer la validation AVANT de "soumettre" événement
    est déclenché. Vous devez appeler setCustomValidity() avant de "soumettre" événement
    si vous voulez un navigateur pour afficher un message de validation. Opéra semble
    poignée de ces étapes dans un ordre incorrect. Notez que checkValidity() dans
    votre code n'a pas d'effet de toute façon. checkValidity() ne montre jamais un
    message de validation.

    http://code.google.com/p/chromium/issues/detail?id=95970

    [Bug 11287] Nouveau: 'setCustomValidity' appel dans l'élément doit utiliser 'oninput' événement...

    @Nick:

    'setCustomValidity' appel dans l'élément doit utiliser 'oninput'
    événement...

    http://lists.w3.org/Archives/Public/public-html/2010Nov/0186.html

    Re: [whatwg] élément de Formulaire non valide message

    @Mounir Lamouri:

    Donc, ce que vous avez à faire est de faire de l'élément valide dans l'invalide événement qui
    est trop tard. Après l'événement invalid, Firefox essaie d'afficher l'INTERFACE utilisateur
    à l'aide de la validationMessage qui renvoie une chaîne vide lorsque l'
    le formulaire est valide. Vous devez annuler l'événement, si vous voulez avoir aucune INTERFACE utilisateur n'
    mais encore annuler la soumission. Vous devez utiliser
    onchange/oninput (emphase ajoutée) pour modifier l'état de validité si vous souhaitez que le formulaire
    être soumis.

    http://www.mail-archive.com/[email protected]/msg23762.html

    La solution est de valider la saisie avec "entrée" gestionnaire d'événement au lieu de le "soumettre" gestionnaire d'événement.

    <!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>
    • tl;dr: Ne pas utiliser setCustomValidity dans le "soumettre" de l'événement. Il est destiné à être mis en avant de la soumettre cas comme dans l' 'entrée' ou 'modifier' événement.
    • Mais avoir de l'expérience utilisateur cohérente, je veux capacité à indiquer à l'utilisateur il y a quelque chose de mal avec un domaine spécifique (par exemple, pas de l'utilisateur), avec la même INTERFACE utilisateur que le reste de ma forme.
    • Donc la réponse est fondamentalement setCustomValidity(''): paramètre une chaîne vide annule la validation.
    • je viens de toucher à cela... et il semble que cela fonctionne dans chrome et safari, mais étonnamment pas firefox... je entrer dans de mauvaises chaîne.. de validation (oninput ou onchange) définit le message de validation (personnalisé) et tout ce qui est bien avec le monde. Puis-je aller pour le corriger, et son e-mail valide et affiche toujours le message. Une autre question, j'ai trouvé ce qui se passe dans n'importe quel navigateur il me semble (pour le courrier électronique).. est ce test@test passe ... avec le suffixe .com ou quoi que... quoi avec ça?
    InformationsquelleAutor XP1