顯示圖像旁邊的字段

我需要驗證一個字段，如果它有一個值，則在該字段旁邊會顯示一個「打勾」符號。顯示圖像旁邊的字段

我有以下的javascript函數它執行驗證

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

CSS代碼

.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的問題是，圖像領域內顯示。我想在正在驗證的字段的外面和旁邊顯示「打勾」圖片。

任何建議是非常感謝。

非常感謝。

來源

2012-07-25 Kim

我認爲，如果可能的話，最好讓圖像和輸入字段在容器元素中彼此相鄰浮動。圖像將被設置爲可見性：隱藏。驗證字段時，向容器中添加一個類，然後將該圖像設置爲可見性：可見。 – 2012-07-25 14:33:06

乾杯..這就是我要做的:) – Kim 2012-07-25 14:36:58

在一般的圖像UI元素應該是背景，因爲他們不是內容的一部分。內聯圖像可以工作，但語義上不太有效。 – 2012-07-25 14:39:16

與display:none風格旁邊的div，然後把圖像表現出來：

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 
    } 
}

或者，你可以有一些控制div容器和設置樣式將其與背景圖像。

來源

2012-07-25 14:33:17 Samich

非常感謝解決方案。 – Kim 2012-07-25 14:36:21

如果你想要的領域外，你必須將圖像應用到包裝元素的背景：

<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

顯示圖像旁邊的字段

回答

相關問題