文本区域颜色，边框颜色不会改变

Question

我希望输入和文本区域在值为空时通过 javascript 变为红色，它适用于输入但不适用于文本区域。有人可以帮忙吗？

$(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>

Answer 1

您依赖于 an element with an ID getting a matching global variable。

这是一个糟糕的想法，因为它使代码非常混乱且难以维护。变量似乎凭空出现。

其中一个问题（通常使用全局变量）是其他代码可能会定义同名的全局变量。

在这种情况下，全局 Text 变量 already has a value 由浏览器定义。

不要那样使用全局变量。您已经在使用 jQuery，因此请使用 ID 选择器创建一个 jQuery 对象。

当你在做的时候：不要重复你自己。

与此类似的东西应该可以解决问题：

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 });
});

Answer 2

不需要像这样使用变量使用 id 和类

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

Answer 3

请检查此解决方案。希望对您有所帮助。

我试过用你自己的代码来解决。谢谢

$(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

html

javascript

css

textarea