私はそのような問題を抱えている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="✓" /><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 にパディングを追加すると、表示されます。なぜ彼らが同じように振る舞わないのか分かりませんか？問題はどこですか？