Почему я должен предварительно стилизовать поле ввода в CSS перед реализацией этого стиля через Javascript?

Question

В настоящее время я следую инструкции по проверке формы, в которой я создаю форму регистрации. Я хочу, чтобы граница поля ввода и значок стали зелеными, если информация, введенная пользователем, удовлетворяла критериям полей ввода, и стала красной, если нет, точно так же, как на рисунке ниже.

Вот код для поля ввода имени пользователя.

.form-control.success input {
  border-color: #2ecc71;
}

.form-control .success i.fa-check-circle {
  visibility: visible;
  color: #2ecc71;
}

  <div class="form-control success" >
          <label for="username">Username</label>
          <input type="text" name="username"
          placeholder="Enter username..." id="username">
          <!-- Awesome fonts -->
          <i class="fas fa-check-circle"></i>
          <i class="fas fa-exclamation-circle"></i>

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

Answer 1

Существует несколько способов стилизовать условия ввода формы. Самое основное c - это изменить каждый стиль тегов, которые вы хотите изменить. Я покажу вам, что именно я имею в виду.

function correctInput(elem) {
  elem.querySelector("input").style.borderColor = "#2ecc71";
  elem.querySelector("i.fa-check-circle").style.visibility= "visible";
  elem.querySelector("i.fa-check-circle").style.color = "#2ecc71";
}

Таким образом, вы меняете стили только с javascript. Но техника, которую использовал ваш инструктор, намного умнее. В этой технике вы используете javascript и CSS вместе.

function correctInput(elem) {
  elem.setAttribute("class", "success");
}

Теперь вы видите разницу. В CSS вы будете стилизовать свой блок div и дочерние элементы с каждым условием, которое вы хотите иметь в своих входах. Тогда вы только измените class имя блока div на javascript, тогда CSS сделает все остальное за вас.