なぜ私はJavascriptを経由して、そのスタイルを実装する前に、CSSでの入力フィールドをスタイル事前なければならないのですか？

ベナールManuh：

私は現在、私は、フォームにサインアップを作成していますフォームバリデーションチュートリアルでは、次のい。私は、入力フィールドやアイコンの境界線が正確に下の写真のように、ユーザーによってで入力された情報は、入力フィールドの基準を満たしている場合は緑色に変わり、それがない場合は赤色に点灯します。

ここで、「ユーザー名」の入力フィールドのコードです。

.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>

彼もJavascriptのファイルに取り組ん前に私のインストラクターの前には、CSSの入力フィールドをスタイル。私の質問は、なぜそれが事前CSSでスタイリングする必要がない、あなただけの通常の入力フィールドを離れることができないとの条件が入力フィールドの緑を回すために使用Javascriptを満たしている場合ということです。

モルテザサドリ：

スタイルフォーム入力条件に複数の方法があります。最も基本的には変更したいというタグのすべてのスタイルを変更することです。私はまさに私が何を意味するかを示しています。

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あなたのための残りを行います。