텍스트 뒤의 레이블 뒤에

Question

다음 HTML이 있습니다. 레이블은 jQuery 유효성 검사 플러그인에 의해 삽입되며 어디에도 배치 할 수 있지만 입력에 직접 따라갈 수는 없다고 생각합니다. 필요한 경우 "연락처 초대"주변에 쉽게 태그를 추가 할 수 있습니다.

레이블을 인라인으로 배치하고 "연락처 초대"텍스트 뒤에 CSS 또는 API를 어떻게 사용할 수 있습니까?

<p id="invite"> 
    <input type="checkbox" checked="" value="1" name="invite" class="error"> 
    <label id="invite-error" class="error" for="invite">Email is required if you wish to invite.</label> 
    Invite Contact 
</p> 

Answer 1

그냥 처음부터 적절한 DOM 마크 업을 만들 수있을 때 CSS를 사용하지 마십시오 .

기본 메시지 배치를 무시하기 위해 jQuery 유효성 검사 플러그인에서 제공하는 the errorPlacement option을 사용하십시오.

$('#myform').validate({ 
    // other options, 
    errorPlacement: function(error, element) { 
     error.insertAfter(element); // <- default, change this to whatever you need 
    } 
}); 

견적 OP :

가 연락을 초대 "나는 쉽게 주위에 태그를 추가 할 수 있습니다" "필요하다면." http://jsfiddle.net/8pawpsht/

---

하는 것은 제한 할 수 있습니다 :

나는

errorPlacement: function (error, element) { 
    error.insertAfter($(element).next()); 
} 

... 전문 데모를 <span> 태그로 "Invite Contact" 텍스트를 포위하고 데모에서이 기능을 사용 조건부를 사용하여 특정 요소 ...

(210)

errorPlacement: function (error, element) { 
    if ($(element).attr('id') == 'foo') { 
     error.insertAfter($(element).next()); 
    } else { 
     error.insertAfter(element); // <- default 
    } 
} 

DEMO 2 : http://jsfiddle.net/8pawpsht/1/ 또는 http://jsfiddle.net/8pawpsht/2/

Answer 2

확인란을 오른쪽으로 이동하고 레이블을 왼쪽으로 옮길 수 있습니다. 초대장 안에 div를 추가하여이를 제어 할 수 있습니다. 참고로

HTML

<p id="invite"> 
<span class="wrapper"> 
<input type="checkbox" checked="" value="1" name="invite" class="error"> 
<label id="invite-error" class="error" for="invite">Email is required if you wish to invite.</label> 
</span> 
<strong>Invite Contact</strong> 
</p> 

CSS

#invite { 
display:block; 
width:100%; 
height:250px; 
background:#d7d7d7; 
margin:0 auto; 
text-align:center; 
} 
.wrapper { 
background:white; 
display:block; 
border:2px solid #333; 
height:20px; 
width: 275px; 
margin:0 auto; 
} 
.error { 
float:right; 
} 
#invite-error { 
float:left; 
} 

, 체크 아웃 내 codepen here