Überprüfen Sie, ob ein HTML-Eingabeelement leer ist oder keinen vom Benutzer eingegebenen Wert hat

Bezogen auf diese Frage hier. Kann ich überprüfen, ob ein Element im DOM einen Wert hat oder nicht? Ich versuche, es in eine ‘if’-Anweisung zu packen und bin mir nicht sicher, ob mein Ansatz richtig ist. Hier geht:

if (document.getElementById('customx')){
    //do something
}

Oder sollte es heißen:

if (document.getElementById('customx') == ""){
    //do something
}

EDIT: Mit Wert meine ich, customx ist ein Texteingabefeld. Wie kann ich überprüfen, ob in dieses Feld kein Text eingegeben wurde?

Der getElementById -Methode gibt ein Element-Objekt zurück, das Sie verwenden können, um mit dem Element zu interagieren. Wenn das Element nicht gefunden wird, null ist zurück gekommen. Im Falle eines Eingabeelements, der value Die Eigenschaft des Objekts enthält die Zeichenfolge im Attribut value.

Unter Ausnutzung der Tatsache, dass die && Bedienerkurzschlüsse, und zwar beides null und die leere Zeichenfolge in einem booleschen Kontext als “falsch” betrachtet werden, können wir die Prüfungen auf Elementexistenz und Vorhandensein von Wertdaten wie folgt kombinieren:

var myInput = document.getElementById("customx");
if (myInput && myInput.value) {
  alert("My input has a value!");
}

getElementById gibt false zurück, wenn das Element nicht im DOM gefunden wurde.

var el = document.getElementById("customx");
if (el !== null && el.value === "")
{
  //The element was found and the value is empty.
}

var input = document.getElementById("customx");

if (input && input.value) {
    alert(1);
}
else {
    alert (0);
}

Deine erste war im Grunde richtig. Das, FYI, ist schlecht. Es führt eine Gleichheitsprüfung zwischen einem DOM-Knoten und einer Zeichenfolge durch:

if (document.getElementById('customx') == ""){

DOM-Knoten sind eigentlich ihre eigene Art von JavaScript-Objekten. Daher würde dieser Vergleich überhaupt nicht funktionieren, da er einen Gleichheitsvergleich für zwei deutlich unterschiedliche Datentypen durchführt.

Sie wollen:

if (document.getElementById('customx').value === ""){
    //do something
}

Der value -Eigenschaft gibt Ihnen einen Zeichenfolgenwert und Sie müssen diesen mit einer leeren Zeichenfolge vergleichen.

var myInput = document.getElementById("customx");
if (myInput.value.length > 0) {
  //do something;
}

(.length > 0 ist eine weitere Möglichkeit, das Eingabeelement zu überprüfen)

Leer ist nicht dasselbe wie “kein Wert”.

HTMLInputElement.value Ist '' wenn Sie einen ungültigen Eintrag haben. Wenn .value ist nicht '', dann ist es nicht leer. Das ist definitiv, aber da gibt es Zeiten, in denen .value === '' aber nicht leer, müssen wir testen. Beispielsweise in Chrome mit a number Eingabetyp, wenn Sie eingeben . oder e es wird in das Eingabefeld eingefügt, aber .value ändert sich nicht von '' weil es ungültig ist.

<input type=number>

Wir können den Browser um weitere Informationen bitten und dankenswerterweise ValidityState wird hervorragend unterstützt. Wenn es keinen Wert gibt, aber der Browser sagt, dass es eine schlechte Eingabe gibt, dann ist es im Grunde nicht leer.

function isInputEmpty(input) {
  return !input.value && !input.validity.badInput;
}

Bearbeiten: Credits an @osullic, um dies in der Spezifikation zu finden:

Der Wert eines Steuerelements ist sein interner Zustand. Daher stimmt es möglicherweise nicht mit der aktuellen Eingabe des Benutzers überein.

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#a-form-control’s-value