显示图像旁边的字段

问题描述：

我需要验证一个字段，如果它有一个值，则在该字段旁边会显示一个“打勾”符号。显示图像旁边的字段

我有以下的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 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容器和设置样式将其与背景图像。

非常感谢解决方案。 – 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; 
    }

于类添加到包装验证。

显示图像旁边的字段

相关推荐