오류가 발생할 때마다 텍스트 상자 배경색을 변경하는 방법?

Question

텍스트 상자에 이메일 ID가 표시됩니다. 잘못된 형식의 이메일을 입력 할 때마다 텍스트 상자의 배경색이 변경됩니다.

<div> 
    <input type="text" placeholder="enter email" ng-blur="visitedEmail = true" name="email" /> 
    <p class="error" ng-show="myform.email.$invalid && !myform.email.$pristine &&visitedEmail">Invalid email!</p> 
</div> 

위의 코드에서 내가 조치가있다 초점을 잃었을 때 내가 너무 NG-흐림을 사용하고 있습니다 :

$(function() { 
    $(':text').hover(function() { 
     this.style.backgroundColor="black"}, 
     function() { 
      this.style.backgroundColor = "transparent"}); 
}); 

이 내 html 코드입니다 :

이 JQuery와 내 코드입니다 끝내라. 이제 초점을 잃어 버렸을 때 텍스트 상자의 배경색을 변경해야합니다 (잘못된 이메일 형식의 경우).

뭐죠 내 코드 문제와이 문제를 해결하기 위해 몇 가지 팁을 제공 ..

Answer 1

시도

<div> 
     <input id="EmailTextBox" type="text" placeholder="enter email" name="email" onblur="ValidateEmail();" /> 
    </div> 
    <script> 
     function ValidateEmail() 
     { 
     var emailTextBox = document.getElementById("EmailTextBox"); 
     if(//checksForValidity 
      emailTextBox.value != "") 
      return true; 
     else 
      emailTextBox.style.backgroundColor = "black"; 

     } 

Answer 2

을 당신이 이것을 달성하기 위해 NG 수준의 지침을 사용하고 싶습니다.

조건에 따라 CSS 클래스를 적용/제거합니다. 그래서 빨간색 배경의 CSS 클래스를 오류 조건 아래에 표시하려고합니다.

그것은 다음과 비슷한 모습이 될 것입니다

마크 업 :

<input type="text" placeholder="enter email" ng-blur="visitedEmail = true" 
name="email" ng-class="{red-background: myform.email.$invalid && 
!myform.email.$pristine && visitedEmail }" 

CSS :이 도움이

.red-background { 
    background: red; 
} 

희망.