Textarea couleur, bordercolor ne changera pas

Je voulais que l'entrée et Textarea deviennent rouges par javascript lorsque les valeurs sont vides, cela a fonctionné pour l'entrée mais pas pour la zone de texte. Quelqu'un peut-il aider?Textarea couleur, bordercolor ne changera pas

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

Source

2017-08-29 Brian Boddaert

Pas besoin d'utiliser des variables et des classes id utiliser comme celui-ci

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

Source

2017-08-29 10:45:29

Merci beaucoup –

Pas de problème, est-il travailler? –

Partiellement, j'ai eu ce que j'ai demandé mais comme avec Text.value === ""? "# f00": "# 0f0"; Il redevient vert quand il n'est pas vide, je n'ai pas réussi à le faire avec le .CSS –

Vous êtes en fonction de an element with an ID getting a matching global variable.

Ceci est une idée terrible, car il rend le code très confus et difficile à maintenir. Les variables semblent apparaître de nulle part. L'un des problèmes (avec l'utilisation des globales en général) est que l'autre code pourrait définir un global avec le même nom.

Dans ce cas, la variable globale Textalready has a value est définie par le navigateur.

N'utilisez pas de globales comme ça. Vous utilisez déjà jQuery, créez donc un objet jQuery à l'aide d'un sélecteur d'ID.

Pendant que vous y êtes: ne vous répétez pas.

Quelque chose le long des lignes de ce qui devrait faire l'affaire:

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

Source

2017-08-29 10:40:18 Quentin

S'il vous plaît vérifier cette solution. J'espère que cela vous sera utile.

J'ai essayé de résoudre en utilisant votre propre code. Merci.

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

Source

2017-08-29 11:25:02

Textarea couleur, bordercolor ne changera pas

Répondre

Questions connexes