web-dev-qa-db-fra.com

Valider la saisie de texte HTML

Quel est le meilleur moyen de valider une entrée de texte HTML telle qu'elle est saisie? Toutes les façons que je connais de le faire ont des inconvénients:

  1. En utilisant $.keypress, vous avez uniquement accès à l'ancienne valeur de l'entrée, pas à la nouvelle. De plus, certains événements (comme couper/coller avec la souris) ne seront pas détectés.

  2. L'utilisation de $.change ne fonctionne que lorsque l'entrée perd le focus.

  3. Cette question propose une solution dans laquelle vous utilisez une interrogation pour surveiller les modifications de propriétés. En principe, il est possible de valider la nouvelle valeur dans le rappel, puis de revenir à l’ancienne si non valide. Cependant, outre le fait de demander un scrutin, je ne suis pas sûr que ce soit exempt de conditions de concurrence.

  4. Cet article suggère d'utiliser les fonctions spécifiques du navigateur, le cas échéant, et de revenir à la scrutation si aucune n'est disponible. On dirait que la meilleure approche à ce jour.

  5. [Update] comme indiqué dans les réponses, $.keyup donne accès à la valeur après la mise à jour. Cependant, non seulement cela ne fonctionne pas pour le couper/coller à la souris, mais échoue également si vous maintenez une touche enfoncée, vous ne relâchez qu'une fois le lot saisi. Ou, si vous combinez keydown et keyup pour enregistrer/restaurer l'ancienne valeur, elle est interrompue si l'utilisateur tape trop rapidement.

Aucune des solutions ci-dessus ne constitue une navigation croisée sans erreur ni vraiment sûre. Existe-t-il de meilleures solutions prêtes à l'emploi ou en préparation? Cela semble être un problème courant. J'ai récemment tenté de répondre similaire _ { questions , sans succès, et une réponse m'intéresse également.

(Un bon argument contre cette pratique est également la bienvenue, au cas où il y aurait de nouveaux problèmes qui se poseraient si cette validation était mise en œuvre; cependant, cela semble une chose courante dans d'autres langues, donc je doute que ce soit une mauvaise chose vouloir)

javascriptjqueryvalidation
28
mgibsonbr

Vous pouvez utiliser les événements input (FF) et propertychange (tous les autres) pour capturer toutes les formes de saisie, y compris clavier et rmb couper/coller. 

http://jsfiddle.net/dFBzW/

$('input').bind('input propertychange', function() {
    $('#output').html($(this).val());
});
48
mrtsherman

Dans le monde jQuery, il est courant de tirer parti des plug-ins pour ces tâches de validation. Les plug-ins peuvent être relativement faciles à utiliser et leur popularité se traduit généralement par moins de bogues que le code écrit à partir de rien.

La validation des entrées est généralement divisée en catégories, notamment:

1) Corrigez le format d'entrée/le masque de saisie. Par exemple, seuls A à Z, ou disons, des nombres à 10 chiffres.

2) Existence de contenu dans un domaine. Par exemple, code d’aéroport ou code postal.

Pour (1), vous pouvez utiliser ces plug-ins relativement populaires:

Plugin d'entrée masqué de Digital Bush pour Jquery . Il propose de nombreuses options de personnalisation, notamment des espaces, par exemple:

du site Web de Digital Bush:

$("#phone").mask("(999) 999-9999");

Le autoNumeric de decorplanit.com . Ils ont un support Nice pour le numérique, ainsi que la monnaie, les arrondis, etc.

adapté du site Web autoNumeric:

$('#amountPaid').autoNumeric({aSep: '.', aDec: ','}); // eg, 9.000,00

Pour (2), vous pouvez utiliser, par exemple, la saisie semi-automatique de l'interface utilisateur de jQuery , combinée aux données de ressource du serveur, dans un format tel que JSON. Celles-ci nécessiteront probablement un code personnalisé pour verrouiller les entrées, mais vous pouvez toujours utiliser des plug-ins pour les fonctionnalités de base et vous concentrer sur la logique métier spécifique que vous créez.

Un texte ci-dessus adapté de deux réponses d’autres articles ici et ici .

5
Zero Distraction

Un bon argument contre cette pratique est également le bienvenu, au cas où de nouveaux problèmes se poseraient si cette validation était mise en œuvre; Cependant, cela semble une chose commune dans d'autres langues, donc je doute que ce soit une mauvaise chose à vouloir.

Si par "valider" vous voulez dire "empêcher la saisie de caractères non valides", je pense que c'est une mauvaise pratique. C'est déroutant pour les utilisateurs, qui ne font peut-être pas très attention et qui ne regardent peut-être même pas le champ pendant qu'ils tapent (par exemple, s'ils entrent un compte ou un numéro de téléphone qu'ils lisent sur un bout de papier). La valeur qui est réellement enregistrée/utilisée peut être légèrement différente de la valeur qu’ils pensaient avoir saisie.

Si par "valider" vous voulez dire "tester la valeur actuelle et attirer l'attention de l'utilisateur sur tous les problèmes", par exemple en affichant une erreur en regard du champ ou en modifiant la couleur d'arrière-plan, il n'y a aucun problème à utiliser une combinaison de plusieurs événements, y compris keyup , changez, flouez, collez, cliquez:

$("field selector").on("keyup change blur paste cut click", function() { ... });

Cela interceptera la plupart des cas normaux au fur et à mesure que l'utilisateur le tape, et pour le cas du presse-papier ou du glisser-déposer, vous savez au moins qu'au pire le champ sera toujours validé lorsque l'utilisateur le laissera. (Évidemment, vous n'autorisez pas l'envoi tant que toutes les erreurs n'ont pas été corrigées.)

Si vous traitez keyup et keydown qui couvre les cas où l'utilisateur a maintenu la touche enfoncée, car la plupart des navigateurs enverront des événements répétés pour cette touche.

4
nnnnnn

Juste pour une autre solution pour éviter certains caractères, sans JQuery ...

<input type="text" onkeypress="checkInput(event)" />

...

function checkInput(e)
{
    //only alpha-numeric characters
    var ok = /[A-Za-z0-9]/.test(String.fromCharCode(e.charCode));
    if (!ok)
        e.preventDefault();
}

Je ne sais pas si cela nécessite de nouvelles versions des choses ou ne fonctionne que sur certains navigateurs. Commentez s'il vous plaît.

2
jozxyqk

Avez-vous essayé oninput?

Exemple HTML:

<input name="username" id="user_name" oninput="readvalue();">

javascript:

function readvalue() {
    var name = $('#user_name').val();
}
2
AhWagih

Cela peut aussi être utile 

$(".cssclass").live("input propertychange", function () {
    //Validate goes here
});
0
Gilly