Textarea color,bordercolor won't change

Question

I wanted the Input and Textarea to turn red through javascript when the values are empty, it worked for the input but not for the textarea. Can someone help?

$(document).on("click", '.btn-info.mailContact', function () {
    values = {
        Onderwerp: $('.Subject').val(),
        Text: $('.TheMessage').value,
    };
    if ($('.Subject').val() != "" && $('.TheMessage').val() != "") {
    State.sendContactMail(values);
    window.location.href = '/confirmation';
    } else {
        Onderwerp.style.color = Onderwerp.value === "" ? "#f00" : "#0f0";
        Onderwerp.style.borderColor = Onderwerp.value === "" ? "#f00" : "#0f0";
        Text.style.color = Text.value === "" ? "#f00" : "#0f0";
        Text.style.borderColor = Text.value === "" ? "#f00" : "#0f0";

    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control Subject" id="Onderwerp" placeholder="Vul je onderwerp hier in"/>

<textarea class="form-control TheMessage" id="Text"  wrap="soft" placeholder="Vul je bericht hier in"></textarea>

<a id="btn-mailContact" class="btn btn-info mailContact">Verstuur contactformulier</a>

score 0 · Answer 1 · answered Aug 29 '17 at 10:40

You are depending on an element with an ID getting a matching global variable.

This is a terrible idea because it makes code very confusing and hard to maintain. The variables seem to appear out of nowhere.

One of the problems (with using globals in general) is that other code might define a global with the same name.

In this case the global Text variable already has a value defined by the browser.

Don't use globals like that. You're already using jQuery, so create a jQuery object using an ID selector.

While you're at it: Don't repeat yourself.

Something along the lines of this should do the trick:

var element_ids = ['Onderwerp', 'Text'];
elements_ids.forEach(function (id) {
    var $element = $("#" + id);
    var color = $element.val === "" ? "#f00" : "#0f0";
    $element.css({ color: color, borderColor: color });
});

score 0 · Accepted Answer · answered Aug 29 '17 at 10:45

0

No need to use variables use id and classes like this

$.('.TheMessage').css("color","#fff").css("border-color","#0f0"); //Use jquery like this

answered Aug 29 '17 at 10:45

Mayank Singh Fartiyal

867
1
11
26

Thank you very much – Brian Boddaert Aug 29 '17 at 12:27
Partially, I got what I asked for but as with Text.value === "" ? "#f00" : "#0f0"; It turns back to green when it's not empty, I didn't achieve this with the .CSS – Brian Boddaert Aug 30 '17 at 13:56

score 0 · Answer 3 · answered Aug 29 '17 at 11:25

Please check this solution. Hope this will helpful for you.

I have tried to solve by using your own code. Thanks.

$(document).ready(function(){
$(".mailContact").click(function () {
    values = {
        Onderwerp: $('.Subject').val(),
        Text: $('.TheMessage').value,
    };
    if ($('.Subject').val() != "" && $('.TheMessage').val() != "") {
    State.sendContactMail(values);
    window.location.href = '/confirmation';
    } else {
        Onderwerp.style.color = Onderwerp.value === "" ? "#f00" : "#0f0";
        Onderwerp.style.borderColor = Onderwerp.value === "" ? "#f00" : "#0f0";
        document.getElementById("Text").style.color = document.getElementById("Text").value === "" ? "#f00" : "#0f0";
        
        document.getElementById("Text").style.borderColor = document.getElementById("Text").value === "" ? "#f00" : "#0f0";
        

    }
})
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<input type="text" class="form-control Subject" id="Onderwerp" placeholder="Vul je onderwerp hier in"/>

<textarea class="form-control TheMessage" id="Text"  wrap="soft" placeholder="Vul je bericht hier in"></textarea>

<a id="btn-mailContact" class="btn btn-info mailContact">Verstuur contactformulier</a>
<input type="button" class="mailContact" value="send" />

</body>
</html>

Textarea color,bordercolor won't change

3 Answers3