Textarea顏色，bordercolor不會更改

我希望Input和Textarea在值爲空時通過JavaScript變成紅色，它對輸入有效，但對textarea不起作用。有人可以幫忙嗎？Textarea顏色，bordercolor不會更改

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

來源

2017-08-29 Brian Boddaert

無需使用變量使用ID和類這樣

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

來源

2017-08-29 10:45:29

非常感謝您 –

沒有問題，是它的工作？ –

部分地，我得到了我所要求的，但與Text.value ===「」？「＃f00」：「＃0f0」;當它不是空的時候，它變回綠色，我沒有用.CSS達到這個目的 –

您根據an element with an ID getting a matching global variable。

這是一個可怕的想法，因爲它使代碼非常混亂，很難維護。變量似乎無處不在。

的問題之一（與一般使用全局變量）是其他代碼可能會定義具有相同名稱的全局。

在這種情況下由瀏覽器所定義的全局變量Textalready 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 }); 
});

來源

2017-08-29 10:40:18 Quentin

請檢查該解決方案。希望這會對你有所幫助。

我試圖用自己的代碼來解決。謝謝。

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

來源

2017-08-29 11:25:02

Textarea顏色，bordercolor不會更改

回答

相關問題