1

我正在使用 jQuery 验证我有这样的问题：我插入图像，当输入有效与否时。当他们插入一个图像时，它会完全显示，但要设置边距并让我的 div 崩溃，而第二个 - 具有相同的 css 属性 - 会部分显示并且不会崩溃任何东西。

我正在使用 Rails，我的表单在 Bootstrap 模式上。

这是屏幕截图 - http://i.imgur.com/06phr.png

这是CSS：

label.error {
color:transparent;
display: inline;  
background: url('not_valid.png') no-repeat;
padding: 10px;
margin-left: 5px;
width: 47px;
height: 36px;
}
label.valid {
background: url('valid.png') no-repeat;
display: inline;  
padding: 10px;
margin-left: 5px;
color:transparent;
width: 47px;
height: 36px;
}
input{
    font-size: 14px;
    border: 1px solid rgba(98,141, 40, 0.5);
    border-radius:10px;
    -moz-box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);
    -webkit-box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);
    box-shadow: inset 0 0 2px 1px rgba(98,141, 40, .2);
}
input.valid{
    border: 1px solid rgb(98,141, 40);
    font-size: 14px;
    -moz-box-shadow: 0 0 3px 3px rgba(98,141, 40, 0.2);
    -webkit-box-shadow: 0 0 3px 3px rgba(98,141, 40, 0.2);
    box-shadow: 0 0 3px 3px rgba(98,141, 40, 0.2);    
    border-radius:5px;
}

HTML

<html>
  <head>

    <title>JCheck</title>
    <link href="application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="jcheck.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <script src="/assets/jquery-1.7.2.js?body=1" type="text/javascript"></script>
<script src="jquery.validate.min.js?body=1" type="text/javascript"></script>
<script src="jquery.js?body=1" type="text/javascript"></script>
<script src="jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="jquery-1.7.2.js?body=1" type="text/javascript"></script>
<script src="jquery.validate.min.js?body=1" type="text/javascript"></script>
<script src="application.js?body=1" type="text/javascript"></script>
    <meta content="authenticity_token" name="csrf-param" />
<meta content="EoQ2xPXGeDJpKsf22dPZcFQDUfj8cAfV8owQ493TkGU=" name="csrf-token" />
  </head>
  <body>
    <script type="text/javascript"> jQuery(function() { var validator = jQuery('#new_user').jcheck({'field_prefix': 'user'}); validator.validates('email', {'presence': {'if': 'email_required?'}, 'format': {'with': /\A[^@]+@([^@\.]+\.)+[^@\.]+\z/, 'allow_blank': true, 'if': 'email_changed?'}, 'presence': true}); validator.validates('password', {'presence': {'if': 'password_required?'}, 'confirmation': {'if': 'password_required?'}, 'length': {'allow_blank': true, 'minimum': 6, 'maximum': 128}}); validator.validates('name', {'presence': true}); validator.field('email').custom_label = 'Email'; validator.field('password').custom_label = 'Password'; validator.field('name').custom_label = 'Name'; }); </script>

<h2>Sign up</h2>

<form accept-charset="UTF-8" action="/users" class="sign_up" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="EoQ2xPXGeDJpKsf22dPZcFQDUfj8cAfV8owQ493TkGU=" /></div>


<div><label for="user_name">Name</label><br />
    <input id="user_name" name="user[name]" size="30" type="text" /></div>

  <div><label for="user_email">Email</label><br />
    <input id="user_email" name="user[email]" size="30" type="text" value="" /></div>

  <div><label for="user_password">Password</label><br />
    <input id="user_password" name="user[password]" size="30" type="password" /></div>

  <div><label for="user_password_confirmation">Password confirmation</label><br />
    <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" /></div>

  <div><input name="commit" type="submit" value="Sign up" /></div>
</form>
  <a href="/users/sign_in">Sign in</a><br />
  <a href="/users/password/new">Forgot your password?</a><br />
  </body>
</html>

我的所有文件： https ://www.dropbox.com/sh/1ea9k2z6vmsvg58/Pz5X0qRNDv （“成功”后删除昏迷）

当我为 label.valid 提供更多填充时，它正在显示。我不明白为什么他们的行为不一样？问题出在哪里？

4

1 回答 1

0

我忘记了默认错误消息。所以我只是删除它们（因为它们是透明的，这是我的项目所需要的）——只显示没有文字的图像。

于 2012-06-20T11:43:26.947 回答