0

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

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

任何建议都非常感谢。

非常感谢。

4

2 回答 2

1

将图像放在带有样式的 div 旁边display:none，然后显示它：

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-25T14:33:17.943 回答
0

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

<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-25T14:38:10.003 回答