web-dev-qa-db-fra.com

Puis-je marquer un champ non valide à partir de javascript?

De la lecture ce post J'ai trouvé qu'il existe des pseudo-classes pour les valeurs d'entrée 'invalides' et 'invalides'.

Existe-t-il un moyen de marquer un champ de saisie comme non valide/valide à partir de javascript? Ou bien, puis-je remplacer la méthode de validation utilisée?

61
Svish

Vous pouvez utiliser la fonction customValidity à cet effet.

Si vous ajoutez un message customValidity au champ, il devient invalide. Lorsque vous définissez le message comme une chaîne vide, il redevient valide (sauf s'il n'est pas valide pour d'autres raisons).

field.setCustomValidity("Invalid field."); rendra le champ invalide.

field.setCustomValidity(""); rendra le champ valide sauf s'il échoue à une contrainte HTML5.

116
dajavax

Modifier : Quelqu'un a précisé que vous recherchez des attributs "valides" "non valides" pour DOM.

J'ajouterais des attributs à chaque balise en utilisant dom_object.setAttribute("isvalid", "true"). Vous pouvez également avoir une fonction de validation centrale qui met à jour ces attributs à chaque fois (et utilise dom_object.getAttribute("isvalid") à chaque fois).

Vous pouvez exécuter cette fonction chaque fois qu'un élément perd le focus ou à tout moment.

Pas vraiment élégant, mais malheureusement il n'y a plus de "pseudo" support avec javascript et HTML5 maintenant.


Si je comprends votre question, vous pouvez faire la validation avec Javascript. Cependant, sachez qu'il est très facile de contourner la validation côté client, en particulier la validation javascript . Vous ne devez jamais faire confiance aux données client et toujours effectuer une vérification côté serveur.

Par exemple, je pouvais facilement trouver des ID d'élément en inspectant le code source, puis faire document.getElementById('some_id').setAttribute('max', new_number) pour changer la valeur maximale (c'était l'une des entrées de votre lien).

Il y a différentes façons de le faire, donc je vais essayer de vous donner l'idiome général.

Vous pouvez récupérer la valeur en faisant document.getElementById('form_element_id').value (assurez-vous de donner au formulaire un name qui est envoyé au serveur et un id qui est utilisé par javascript). Pour les zones de texte, vous pouvez utiliser .innerHTML.

Ensuite, vous avez la valeur dans une variable, il existe différentes façons de la vérifier.

Par exemple, vous pouvez faire if (parseInt(my_value) < 0) //error. Vous pouvez également utiliser des expressions régulières, je ne vais pas tout expliquer, mais vous pouvez commencer ici http://www.w3schools.com/jsref/jsref_obj_regexp.asp . Je sais que w3schools n'est pas la meilleure source mais je trouve que c'est un bon endroit pour commencer.

Maintenant, pour la partie validation: ajoutez onsubmit="return validateForm() à votre balise de formulaire où validateForm () est la fonction qui fait tout le contrôle. Et la fonction renvoie simplement true si elle est valide et false sinon. Ceci remplace la fonction de validation par défaut (qui par défaut ne fait rien).

Ainsi, dans l'exemple ci-dessus, //error Serait remplacé par return false. Vous pouvez aussi faire autre chose; comme alerter l'erreur puis retourner false. Vous pouvez également utiliser javascript pour mettre en surbrillance les champs invalides (vous ne savez pas si c'est ce que vous entendez par " marquer un champ de saisie comme invalide/valide à partir de javascript " )

Bien sûr, si vous ne voulez pas vérifier tous les champs, il vous suffit de renvoyer true si certains sont valides. Encore une fois, vous ne devriez pas vous fier à cela, mais si vous ne cherchez qu'à dissuader les gens moyens, c'est une solution facile.

4
Raekye