레이블 색상을 오류가있는 양식으로 변경하십시오.

Question

유효성 검사 플러그인을 사용하고 있습니다. 누군가 제출 단추를 클릭하고 필수 필드가 채워지지 않으면 관련 필드의 테두리 색이 빨간색으로 바뀝니다. 그러나 내 문제는 그 옆에있는 텍스트의 색을 변경하고 싶다는 것입니다. 이것은 내 구조입니다.

<div class="row"> 
    <label for="name">Name*</label> 
    <input type="text" id="name" name="name"> 
</div> 
.form.a input.error {border:2px solid #eb053b;} 

텍스트 색상을 변경하려면 어떻게 레이블 요소를 선택할 수 있습니까? 부모 요소를 선택할 수 없기 때문에 CSS에서는 불가능합니다. 그러나 jQuery로이를 수행하는 방법을 모르겠습니다.

Answer 1

당신은 내가 코멘트에서 언급 한 바와 같이이 버튼을

if(jQuery('.form.a input').css('border')==2px solid #eb053b){ 
    jQuery(this).siblings('label').css('color','#eb053b'); 
} 

Answer 2

제출 클릭에이 이벤트를 트리거 할 수 있습니다, JQuery와 유효성 검사기는 클래스 '오류'와 기본적으로 입력 상자 후 레이블을 추가합니다. 유효성 검사기가 아직이 작업을 수행하지 못하도록하는 해킹을 찾지 못했지만, 여기에 제가 수행하는 내용이 있습니다.
HTML :

<div class="row"> 
    <input type="text" id="name" placeholder="Name (required)" name="name"> 
</div> 

CSS는 :

.form.a input.error {border:2px solid #eb053b;} 
label.error { color: #ebo53b;} 

FIDDLE

이 붉은 색에 입력 상자 후 레이블에서 의미있는 오류 메시지를 생성합니다.
rules 옵션 jquery 유효성 검사기를 사용하여 오류 메시지를 사용자 정의 할 수 있으며, 레이블의 위치 (앞 또는 뒤에)는 errorPlacement 옵션으로 변경됩니다.

문제에 대한 정확한 해결책을 찾으면 답을 업데이트하겠습니다.