Kann ich ein Feld aus Javascript als ungültig markieren?

Vom Lesen dieses Beitrags ich festgestellt, dass es einige Pseudoklassen für 'gültige' und 'ungültige' Eingabewerte gibt, die in HTML5 eingeführt wurden.

Gibt es eine Möglichkeit, ein Eingabefeld aus Javascript als ungültig / gültig zu markieren? Oder kann ich alternativ die verwendete Validierungsmethode überschreiben?

Zu diesem Zweck können Sie die Funktion customValidity verwenden.

Wenn Sie dem Feld eine customValidity-Nachricht hinzufügen, wird diese ungültig. Wenn Sie die Nachricht als leere Zeichenfolge festlegen, wird sie wieder gültig (es sei denn, sie ist aus anderen Gründen ungültig).

field.setCustomValidity("Invalid field."); macht das Feld ungültig.

field.setCustomValidity(""); macht das Feld gültig, es sei denn, es schlägt eine HTML5-Einschränkung fehl.

Bearbeiten : Jemand hat klargestellt, dass Sie nach "gültigen" "ungültigen" Attributen für DOM suchen.

Ich würde jedem Tag Attribute hinzufügen, indem ich dom_object.setAttribute("isvalid", "true"). Sie könnten auch eine zentrale Validierungsfunktion haben, die diese Attribute jedes Mal aktualisiert (und dom_object.getAttribute("isvalid")jedes Mal verwendet).

Sie können diese Funktion jedes Mal ausführen, wenn ein Element den Fokus verliert oder wann immer Sie möchten.

Nicht gerade elegant, aber leider gibt es jetzt keine "Pseudo" -Unterstützung mit Javascript und HTML5.

Wenn ich Ihre Frage verstehe, können Sie die Validierung mit Javascript durchführen. Seien Sie jedoch gewarnt, dass es sehr einfach ist, die clientseitige Validierung zu umgehen, insbesondere die Javascript-Validierung . Sie sollten niemals Client-Daten vertrauen und immer auf der Serverseite prüfen.

Zum Beispiel könnte ich leicht Element-IDs finden, indem ich den Quellcode überprüfe und dann document.getElementById('some_id').setAttribute('max', new_number)den Maximalwert ändere (dies war einer der Einträge von Ihrem Link).

Es gibt verschiedene Möglichkeiten, also werde ich versuchen, Ihnen die allgemeine Sprache zu geben.

Sie können den Wert abrufen, indem Sie Folgendes tun document.getElementById('form_element_id').value(stellen Sie sicher, dass Sie dem Formular ein Formular geben, das namean den Server gesendet wird, und ein Formular , iddas von Javascript verwendet wird). Für Textbereiche können Sie verwenden .innerHTML.

Wenn Sie den Wert in einer Variablen haben, gibt es verschiedene Möglichkeiten, ihn zu überprüfen.

Zum Beispiel könnten Sie tun if (parseInt(my_value) < 0) //error. Sie könnten auch reguläre Ausdrücke verwenden, ich werde nicht alles erklären, aber Sie könnten hier beginnen http://www.w3schools.com/jsref/jsref_obj_regexp.asp . Ich weiß, dass w3schools nicht die beste Quelle ist, aber ich finde es ein guter Anfang.

Nun zum Validierungsteil: Fügen Sie onsubmit="return validateForm()Ihrem Formular-Tag hinzu, wobei validateForm () die Funktion ist, die alle Überprüfungen durchführt. Und die Funktion gibt nur zurück, truewenn sie gültig ist oder falsenicht. Dies überschreibt die Standardüberprüfungsfunktion (die standardmäßig nichts bewirkt).

Also im obigen Beispiel //errorwürde durch ersetzt return false. Sie können auch andere Dinge tun; B. den Fehler alarmieren und dann false zurückgeben. Sie können auch Javascript verwenden, um die ungültigen Felder hervorzuheben (nicht sicher, ob dies mit " Markieren eines Eingabefelds als ungültig / gültig aus Javascript " gemeint ist ).

Wenn Sie nicht alle Felder überprüfen möchten, müssen Sie natürlich nur true zurückgeben, wenn die bestimmten Felder erfolgreich sind. Auch hier sollten Sie sich nicht darauf verlassen, aber wenn Sie nur Durchschnittsbürger abschrecken möchten, ist dies eine einfache Lösung.

Gibt es eine Möglichkeit, ein Eingabefeld aus Javascript als ungültig / gültig zu markieren?

Leider können Sie Pseudoklassen in JavaScript nicht formatieren, da sie keine echten Elemente sind und im tatsächlichen DOM nicht vorhanden sind.

Mit Vanilla JavaScript würden Sie die Validierungs-API verwenden .

In jQuery können Sie dies einfach tun: http://jsfiddle.net/elclanrs/Kak6S/

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

Oder kann ich alternativ die verwendete Validierungsmethode überschreiben?

Wenn Sie die HTML5-Validierung verwenden, halten Sie sich an das Markup. Andernfalls können Sie die HTML5-Validierung mit $form.attr('novalidate', 'novalidate')JS deaktivieren und verwenden, um Ihre Felder zu validieren, und dann bei Bedarf validoder invalidKlassen hinzufügen . Ich habe ein Plugin erstellt , das so funktioniert, um Nicht-HTML5-Browser zu unterstützen.