Я хотел, чтобы Input и Textarea стали красными через javascript, когда значения пусты, это работало для ввода, но не для textarea. Может кто-нибудь помочь?

$(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>
0
Brian Boddaert 29 Авг 2017 в 13:35

3 ответа

Лучший ответ

Нет необходимости использовать переменные, использовать идентификатор и классы, как это

$.('.TheMessage').css("color","#fff").css("border-color","#0f0"); //Use jquery like this
0
Mayank Singh Fartiyal 29 Авг 2017 в 10:45

Пожалуйста, проверьте это решение. Надеюсь, это поможет вам.

Я пытался решить с помощью собственного кода. Благодарю.

$(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>
0
Gajjar Chintan 29 Авг 2017 в 11:25

Вы зависите от элемент с идентификатором, получающим совпадающую глобальную переменную.

Это ужасная идея, потому что она делает код очень запутанным и сложным в обслуживании. Переменные, кажется, появляются из ниоткуда.

Одна из проблем (с использованием глобальных переменных в целом) заключается в том, что другой код может определять глобальный объект с тем же именем.

В этом случае глобальная переменная Text уже имеет значение определяется браузером.

Не используйте такие глобалы. Вы уже используете jQuery, поэтому создайте объект 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 });
});
0
Quentin 29 Авг 2017 в 10:40