parsley.js에서 이미지를 성공적으로 표시하려면 어떻게해야합니까?

Question

이미 웹 사이트의 양식과 통합 된 parsley.js가 있습니다. 그러나 한 단계 더 나아가 성공하면 각 필드 옆에 표시 할 이미지 (녹색 체크 표시)를 표시하려고합니다.

이것은 매우 간단한 질문 인 것처럼 보이지만, 불행히도 parsley.js 문서를 따라 가면서이 작업을 수행하는 방법을 알 수는 없습니다.

정확히 원하는 위치에 이미지가있는 div를 만들고 'display : none'을 수행 한 다음 디스플레이를 블록 또는 성공으로 변경한다고 생각하고 있습니까? 방금 내가 뭘 설명했는지도 모릅니다.

도움을 주시면 감사하겠습니다.

Answer 1

은 "input.parsley.select"속성에서 웹 페이지

input.parsley-success, 
 
select.parsley-success, 
 
textarea.parsley-success { 
 
\t color: #468847; 
 
\t border: 1px solid rgba(80, 210, 80, 1); 
 
} 
 

 
input.parsley-error, 
 
select.parsley-error, 
 
textarea.parsley-error { 
 
\t color: white; 
 
\t background-color: rgba(255, 30, 30, 0.235); 
 
\t border: 1px solid #F56969; 
 
\t outline:none; 
 
} 
 

 
.parsley-errors-list { 
 
    margin: 4px 0 3px; 
 
    padding: 0; 
 
    list-style-type:none; 
 
    font-size: 0.9em; 
 
    line-height: 0.9em; 
 
    opacity: 0; 
 
\t font-family:Arial; 
 
    transition: all .3s ease-in; 
 
    -o-transition: all .3s ease-in; 
 
    -moz-transition: all .3s ease-in; 
 
    -webkit-transition: all .3s ease-in; 
 
    color:black; 
 
} 
 

 
.parsley-errors-list.filled { 
 
    opacity: 1; 
 
}

에 연결된 CSS 파일에이 코드를 추가, 추가

background: url("link/to/image.jpg") 100px no-repeat;

"100px"는 입력 크기에 따라 다를 수 있습니다. 당신이 녹색을 추가하려면

는, 당신은

background-color: rgba(80, 210, 80, 0.35);

이 올바르지 않은 요소를 할 수있는 이미지를 설정하는 줄 끝이를 추가, 당신은 할 것 거의 같지만 "input.parsley-error"에 대한 것입니다.

이 CSS를 사용하면 오류 글꼴, 목록 유형 및 텍스트 색상과 같은 몇 가지 사항을 변경할 수도 있습니다. 나는 네가 좋아하는 것을 얻을 때까지 그걸 가지고 놀 것을 제안한다.

희망이 있습니다.