SASS를 사용한 HTML 양식 유효성 검사?

Question

모든 입력 필드에 '필수'및 '패턴'인수가있는 양식이 있습니다.

입력이 유효하지 않은 경우 입력란 오른쪽에 작은 녹색 그림을 표시하여 사용자가 올바르게 입력했음을 보여주고 싶습니다.

Im이 자바 스크립트/jquery없이 순수 CSS/sass로 할 수 있는지 궁금한가요?

나는

if input:invalid{ 
    .divonrightofinputbox{ 
    background:url('green.png'); 
    } 
}else{ 
    .divonrightofinputbox{ 
    display:none; 
    } 
} 

같은 것을이 말대꾸 가능합니다 생각과 만약 그렇다면, 어떻게 되었는가? :)

미리 도움 주셔서 감사합니다!

Answer 1

새스는 문서 또는 해당 양식의 상태에 대해 아무 것도 모릅니다. CSS가 제공하는 것을 사용해야합니다.

input { 
    &:required { 
     + .div-after-the-input { 
      // required styles 
     } 
    } 

    &:invalid, &:out-of-range { 
     + .div-after-the-input { 
      background: url('invalid.png') no-repeat; 
     } 
    } 

    &:valid, &:in-range { 
     + .div-after-the-input { 
      display: none; 
     } 
    } 
}