Question

我需要验证一个字段，如果它有一个值，则字段旁边会显示一个'tick'符号。

我有以下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的问题是图像显示在字段内。我想在正在验证的字段旁边和旁边显示“tick”图像。

任何建议都表示赞赏。

非常感谢。

Answer 1

将图片放在具有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，并在背景中使用图像设置样式。

Answer 2

如果您希望它在字段之外，则必须将图像应用于包装元素的背景：

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

在验证时将类添加到包装器。

显示字段旁边的图像

2 个答案: