Puis-je marquer un champ invalide à partir de JavaScript?

En lisant cet article, j'ai trouvé qu'il existe des pseudo-classes pour les valeurs d'entrée «valides» et «invalides» introduites dans HTML5.

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

Vous pouvez utiliser la fonction customValidity à cette fin.

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 (à moins qu'il ne soit invalide 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.

Edit : 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 les utilise à dom_object.getAttribute("isvalid")chaque fois).

Vous pouvez exécuter cette fonction chaque fois qu'un élément perd le focus, ou quand vous le souhaitez.

Pas vraiment élégant, mais malheureusement, il n'y a pas de support "pseudo" 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 des vérifications côté serveur.

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

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

Vous pouvez saisir la valeur en faisant document.getElementById('form_element_id').value(assurez-vous de donner le formulaire a namequi est envoyé au serveur, et un idqui 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 manières de la vérifier.

Par exemple, vous pourriez 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 point de départ.

Passons maintenant à la partie validation: ajoutez onsubmit="return validateForm()à votre balise form où validateForm () est la fonction qui fait toute la vérification. Et la fonction retourne simplement truesi elle est valide et falseautrement. Cela remplace la fonction de validation par défaut (qui par défaut ne fait rien).

Donc, dans l'exemple ci-dessus, //errorserait remplacé par return false. Vous pouvez faire d'autres choses aussi; comme alerter l'erreur puis retourner faux. Vous pouvez également utiliser javascript pour mettre en évidence les champs non valides (je ne sais 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, vous ne devez renvoyer true que si certains passent. Encore une fois, vous ne devriez pas vous fier à cela, mais si vous voulez seulement dissuader les gens ordinaires, c'est une solution facile.

Existe-t-il un moyen de marquer un champ de saisie comme invalide / valide à partir de javascript?

Malheureusement, vous ne pouvez pas styliser les pseudo-classes en JavaScript, car ce ne sont pas de vrais éléments, ils n'existent pas dans le DOM réel.

Avec JavaScript vanilla, vous utiliseriez l' API de validation .

Dans jQuery, vous pouvez simplement le faire, http://jsfiddle.net/elclanrs/Kak6S/

if ( $input.is(':invalid') ) { ... }

Ou bien, puis-je remplacer la méthode de validation utilisée?

Si vous utilisez la validation HTML5, respectez le balisage. Sinon, vous pouvez désactiver la validation HTML5 avec $form.attr('novalidate', 'novalidate')et utiliser JS pour valider vos champs, puis ajouter des classes validou invalidsi nécessaire. J'ai créé un plugin qui fonctionne comme ça pour prendre en charge les navigateurs non HTML5.