更改所需表单输入上的CSS图像位置

Question

我正在尝试更改所需表单输入上的CSS图像错误位置

使用CSS和setfocus设置gray和blue，但我需要的是javascirpt或jquery，以便在出错时将CSS图像设置为红色。很难搞清楚错误处理过程。

Answer 1

确定它正在使用它：

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>

<style type="text/css">

#docs {
  display: block;
  position: absolute;
  bottom: 0;
}
  </style>


<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {

    $('#myform').validate({ // initialize the plugin
        errorElement: 'div',
        rules: {
            field1: {
                required: true,
                minlength: 5
            },
            field2: {
                required: true,
                minlength: 5
            }
        },
        submitHandler: function(form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});
});//]]> 

</script>

Answer 2

如果没有看到代码，很难提出任何建议。

但实际上你可以使用CSS本身修改图像（背景图像）。

看一下这个例子：

<强> HTML

<div class="msg_box">
  <span class="msg_icon"></span>
  <input type="text" />
</div>

<div class="msg_box success">
  <span class="msg_icon"></span>
  <input type="text" />
</div>

<强> CSS

.msg_icon{
  background-image: url('https://cdn4.iconfinder.com/data/icons/black-white-social-media/32/mail_email_envelope_send_message-32.png');
  width: 32px;
  height: 32px;
  display: inline-block;
}

.success .msg_icon{
  background-image: url('https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/mail-32.png');
}

JSFiddle Link

当父容器具有success作为类名时，图标的背景图像会发生变化！在这里，我们使用CSS选择器来修改图像。不需要jquery / javascript。但在您的情况下，在我们看到代码之前，我们将无法提出任何建议！