javascriptを使用して検証時にhtml CSSコードを更新する

Question

私は自分のhtmlにフォームを持っています。

<div class="form-group"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="zmdi zmdi-lock"></i></span> 
     <div id="form_field" class="fg-line"> 
      <input name="pas" type="password" class="form-control" placeholder="Password"> 
     </div> 
    </div> 
</div> 

Iは、入力フィールドが空白の場合、クラスfg-lineにhas-errorを追加する必要があります。

私は、明らかに最初のform-fieldに遭遇しましたが、それはわかりませんが、入力フィールドに空きのhas-errorしか適用されないようにする方法です。

function validateForm() { 
    var isValid = true; 
    $('.form-control').each(function() { 
     if ($(this).val() === '') { 
      isValid = false; 

      $("#form_field").removeClass("fg-line").addClass("fg-line has-error"); 
     } 
    }); 
    return isValid; 
} 

Answer 1

あなたの構造では、あなたがテストしようとしている入力は、変更しようとしているdivのように常に直接の子ですか？ここに見られるようにあなたは$(this).parent()を行うことにより、ループの親で現在の要素をつかむことができます。

function validateForm() { 
    var isValid = true; 
    $('.form-control').each(function() { 
     if ($(this).val() === '') { 
      isValid = false; 

      //Add has-error class to the parent div 
      $(this).parent().addClass("has-error"); 
     } 
    }); 
    return isValid; 
} 

そうでない場合、あなたはDOMツリーに沿って上向きに横断する.closest()を使用して、指定されたセレクタの最初のマッチングの発生を見つけることができます。

function validateForm() { 
    var isValid = true; 
    $('.form-control').each(function() { 
     if ($(this).val() === '') { 
      isValid = false; 

      //Add has-error class to the closest occurrence of class fg-line 
      $(this).closest('.fg-line').addClass("has-error"); 
     } 
    }); 
    return isValid; 
}