1

私はそのような問題を抱えているjQuery検証を使用しています:入力が有効かどうかにかかわらず、画像を挿入します。彼らが挿入しているときに、1つの画像が完全に表示されますが、マージンを作成してdivをクラッシュさせ、2番目に同じ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 に答える