Как сделать проверку формы Javascript с помощью цветного текстового поля (красный / зеленый) без использования встроенного CSS?

Question

Итак, я сделал проверку формы Javascript, где я получаю сообщение с предупреждением, если в форме ничего не написано.Вместо предупреждающего сообщения я хочу цветное (красное / зеленое) текстовое поле.Когда вы ничего не пишете и пытаетесь отправить, вы получаете красное поле с сообщением.Когда вы записываете, что вам нужно написать, и отправляете это, вы получаете зеленое поле.

function validateFormC() {
  let x = document.forms["contactForm"]["name_contact"].value;
  if (x === "") {
   alert("Don't forget to write down your name!");
  return false;
  }

Я уже знаю, как сделать цветные флажки с помощью HTML.Мне нужно знать, как сделать это с Javascript для школьного проекта.Но важно, чтобы я не использовал встроенный CSS.Любая помощь будет оценена, спасибо.

Answer 1

Вам нужно что-то вроде:

var warnMessage = document.createElement("div");
    warnMessage.innerHTML = "Don't forget to write down your name!";
    warnMessage.setAttribute('class', 'warnMessage');
    document.body.appendChild(warnMessage);

Затем создайте соответствующий стиль CSS: warnMessage, вероятно, с bgcolor:red; Снова то же самое для вашего сообщения об успехе, но зеленым.

Answer 2

Попробуйте что-нибудь подобное.Вы можете изменить borderColor на backgroundColor, если хотите.

function validateFormC() {
  var x = document.forms["contactForm"]["name_contact"];
  if (x.value === "") {
    alert("Don't forget to write down your name!");
    x.style.borderColor = 'red';
    return false;
  }
  else
    x.style.borderColor = 'green';
}

Answer 3

Вы можете создать селектор класса в CSS:

.red-input {
  border: 1px solid red;
}

, затем в вашем JavaScript вы можете выбрать элемент и добавить к нему этот класс:

// With Vanilla JavaScript
document.getElementById('input_id').classList.add('red-input');

// With jQuery
$('#input_id').addClass('red-input')