1
私は次のコードを持っている：jQueryの検証
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var validator = $("#my-form").bind("invalid-form.validate", function() {
$("#errtxt").html("Please correct the errors shown below:");
$("#errtxt").addClass("error-msg");
}).validate({
success: function(label) {
label.addClass("valid");
},
rules: {
text1: {
required: true
},
text2: {
required: true,
}
},
messages: {
text1: "",
text2: "",
} ,
errorElement: "span"
});
});
</script>
</head>
<body>
<form id="my-form" action="" method="post">
<span class="errtxt"></span>
<label for="text1">Text 1: </label>
<input type="text" name="text1" id="text1" />
<label for="text2">Text 2: </label>
<input type="text" name="text2" id="text2" />
<input type="submit" />
</form>
</body>
</html>
を私は基本的に画像を表示するために、エラーの空のスパンをしたいです。しかし、成功すると、画像が変わって別のクラスになるはずです。 問題は私のスパンが私が何をしても "エラー"と "有効"の両方のクラスを取得していることです。しかし、私は空のメッセージがあるので、これは起こっているだけです。空のメッセージがなければ、クラスは必要に応じて適用されるようです。たとえば、これを次のように変更します。
messages: {
text1: " ",
text2: " ",
} ,
しかし、私はbgイメージのために空のエラースパンを望みます。これはバグか何かが間違っているのですか？私はコードをあまり理解していませんが、おそらく私はこれをやっているのです。
成功：function（label）{ label.addClass（ "valid" ）; }、
間違っている可能性があります。空き領域を使い続ける必要がある場合、大きな問題ではありませんが、バグのようです。
また、問題が発生している間は、すべてのフィールドメッセージをデフォルトの ""にデフォルト設定する簡単な方法があります。提出オン
は、私が欲しい： - 次の各入力クラスエラーと空のスパン（フィールドが空の場合） へ - または有効なクラス、それが合格した場合（フィールドが内容を持っている場合）。
問題は、フィールドが空であっても、両方のクラスが「エラーが有効」になっているという問題です。しかし、私はそれにエラーメッセージのテキストがある場合は動作しますが、理想的には、私はエラーメッセージのテキストをしたくありません。私はそれがバグかもしれないと思う。最も簡単な例を参照してください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my-form").validate({
rules: {
text1: {
required: true
},
},
messages: {
text1: "",
} ,
errorElement: "span",
success: "valid",
});
});
</script>
<style>
span.error{
float:left; width:15px; height:15px;
background:red;
}
span.valid{
display:block; width:15px; height:15px;
background:green;
}
</style>
</head>
<body>
<form id="my-form" action="" method="post">
<label for="text1">Text 1: </label>
<input type="text" name="text1" id="text1" />
<input type="submit" />
</form>
</body>
</html>
これは動作しません。しかし、これは動作します：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my-form").validate({
rules: {
text1: {
required: true
},
},
messages: {
text1: " ",
} ,
errorElement: "span",
success: "valid",
});
});
</script>
<style>
span.error{
float:left; width:15px; height:15px;
background:red;
}
span.valid{
display:block; width:15px; height:15px;
background:green;
}
</style>
</head>
<body>
<form id="my-form" action="" method="post">
<label for="text1">Text 1: </label>
<input type="text" name="text1" id="text1" />
<input type="submit" />
</form>
</body>
</html>
メッセージテキストには何か違いがあります。