필드 옆에 이미지 표시

값이 있으면 해당 필드 옆에 '눈금'기호가 표시되도록 필드의 유효성을 검사해야합니다.필드 옆에 이미지 표시

내가

.mandatory_field_completed{ 
    border-style: solid; 
    border-width: 1px; 
    border-color: green; 
    background:url(../images/tick.png) right no-repeat; 
    padding: 4px 4px 4px 34px; 
}

위의 CSS의 문제는 이미지가 필드 안에 표시되어있는 검증을

function validate_this_field(field_value, field_id) 
{ 
    if($j('#' + field_id).val()) { 
    $j('#' + field_id).addClass('mandatory_field_completed'); 
    } 
}

CSS 코드를 수행하는 다음과 같은 자바 스크립트 함수가 있습니다. 유효성 검사중인 필드의 바깥 쪽에서 '틱'이미지를 표시하고 싶습니다.

모든 의견을 보내 주시면 감사하겠습니다.

고마워요. 당신은 배경 이미지와 함께 몇 가지 컨트롤 컨테이너 사업부 및 설정 스타일을 가질 수

function validate_this_field(field_value, field_id) { if($j('#' + field_id).val()) { $j('#' + field_id).addClass('mandatory_field_completed') .next().show(); // show next element after div } }

또는 :

출처

2012-07-25 Kim

가능하면 컨테이너 요소에서 이미지와 입력 필드가 서로 옆에 떠있는 것이 좋습니다. 이미지가 가시성 : 숨김으로 설정됩니다. 필드의 유효성이 검사되면 컨테이너에 클래스를 추가 한 다음 이미지를 visibility : visible로 설정합니다. –

건배 .. 그게 내가 할 일이야. – Kim

일반적으로 이미지 인 UI 요소는 내용의 일부가 아니기 때문에 배경이어야합니다. 인라인 이미지는 작동하지만 의미 상 유효하지는 않습니다. –

다음 display:none 스타일 사업부 옆에 넣어 이미지를 보여줍니다.

출처

2012-07-25 14:33:17 Samich

솔루션을 제공해 주셔서 감사합니다. – Kim

당신은 필드 밖에서 그것을 원하는 경우, 포장 요소의 배경 이미지를 적용해야합니다 :

이

<div class="tick"><input class="txtInput" type="test"></div>

CSS :

.txtInput { 
     width:200px; 
    } 

    .tick { 
     background-image:url(http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Check_mark_23x20_02.svg/19px-Check_mark_23x20_02.svg.png); 
     padding-right:20px; 
     background-repeat:no-repeat; 
     background-position:205px 0px; 
    }

가에 래퍼로 클래스를 추가 확인.

출처

2012-07-25 14:38:10

필드 옆에 이미지 표시

답변

관련 문제