Javascript kann nicht leeren String Farbe

Question

Ändern der Farbe des Vornamen ändern funktioniert nur, wenn die Zeichenfolge nicht leer sind, es wird grün, wenn es Text ist, aber es wird nicht rot, wenn es eine leere Zeichenfolge ist. Wie könnte ich das machen?

$(document).on("click", '.btn-info.mailContact', function() { 
 
     values = { 
 
     MailTo: $('.Emailadres').val(), 
 
     FirstName: $('.Firstname').val(), 
 
     Onderwerp: $('.Subject').val(), 
 
     Email: $('.Emailadres').val(), 
 
     Tel: 'n.v.t.', 
 
     Text: $('.TheMessage').val(), 
 
     Comment: 'Comment' 
 
     }; 
 
     if ($('.Firstname').val() != "" && $('.Subject').val() != "" && 
 
     $('.TheMessage').val() != "" && $('.Emailadres').val() != "") { 
 
     State.sendContactMail(values); 
 
     window.location.href = '/confirmation'; 
 
     } else { 
 
     if (FirstName != "") 
 
      FirstName.style.color = "green"; 
 
     else 
 
      FirstName.parents.style.color = "red"; 
 
    
 
     } 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-2" > 
 
    <strong class="FirstnameTitle"> 
 
    <span class="text-danger">*</span> 
 
    Naam: 
 
    </strong> 
 
</div> 
 
<div class="col-md-10"> 
 
    <input autofocus="autofocus" required="required" type="text" 
 
     class="form-control Firstname" id="FirstName" placeholder="Vul je naam hier in"/> 
 
</div>

Answer 1

Die CSS color Eigenschaft wirkt sich auf die Vordergrund Farbe des Elements es angewendet wird. Bei Elementen, die Text (Strings) enthalten, wird die Farbe auf die Zeichen angewendet. Wenn keine Zeichen vorhanden sind (leere Zeichenfolge), wird keine Farbe zugewiesen, sodass keine Farbe angezeigt wird.

können Sie einen background-color auf ein Element anwenden den Raum, den es einnimmt, auf der Seite mit einer Farb ausgefüllt zu sehen. Jedoch mit Inline-Elementen (dh <span>, <a>), deren width wird durch ihren Gehalt Größe bestimmt, so dass, wenn sie leer sind, werden sie keine Größen muss in füllen. Ähnlich ist es mit Block-Ebene Elemente (dh <div>, <section>), deren height wird durch ihren Inhalt bestimmt, also, wenn es keinen Inhalt gibt, gibt es keine height. Bei Inline- und Blockelementen können Sie jedoch manuell eine Größe festlegen (Inline-Elemente müssen auf display:inline-block gesetzt sein), um das Element "offen" zu halten. Sobald eine Nicht-Null-Größe eingestellt ist, kann eine Hintergrundfarbe gesehen werden. Formularelemente (die standardmäßig eine definierte Größe haben) können so gestylt werden, dass sie eine Hintergrundfarbe haben, unabhängig davon, ob sie Inhalt haben oder nicht.

Hier ist ein Beispiel:

var t = document.getElementById("txt"); 
 

 
t.addEventListener("input", function(){ 
 

 
    t.style.backgroundColor = t.value === "" ? "#f00" : "#0f0"; 
 
    
 
});

Type some characters and then delete them: 
 
<input type="text" id="txt">

Auch bedenken Sie, dass eine einfache visuelle Styling auf ein leeres Feld basiert und nur required Attribut durch Hinzufügen des HTML ohne JavaScript erreicht werden mit CSS dann :valid und :invalid Pseudoklassen, wie folgt aus:

#txt:valid { background-color:#0f0; } 
 
#txt:invalid { background-color:#f00; }

Type some characters and then delete them: <input type="text" id="txt" required>

Answer 2

... 

FirstName: $('.Firstname').val(), 

... 

FirstName.style.color = "green"; 

Ein paar Dinge sind falsch hier:

1. Sie FirstName als Eigenschaft des values Objekt definiert haben wörtliche, aber wenn Sie versuchen, Um die Farbe einzustellen, rufen Sie nur FirstName, nicht values.FirstName.
2. Sie versuchen, die Farbe auf $('.Firstname').val(), die nur eine Zeichenfolge ist einzustellen. Sie müssen die Farbe für das tatsächliche Element festlegen - $('.Firstname').css('color', 'green').

Answer 3

Was Sie tun möchten, ist die Platzhalter-Farben zu ändern. Überprüfen Sie einfach diese Antwort, wie man es tun;) https://stackoverflow.com/a/2610741/5463835