У меня есть следующий код:
<!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>
Я хочу, чтобы при ошибке отображался пустой интервал. Однако в случае успеха изображение должно измениться, поэтому у него должен быть другой класс.
Проблема в том, что мой диапазон получает оба класса "error" и "valid", что бы я ни делал. Но это происходит только потому, что у меня есть пустые сообщения, если у меня нет пустых сообщений, классы, кажется, применяются по мере необходимости. Например, изменение его на это работает:
messages: {
text1: " ",
text2: " ",
} ,
Однако я хотел бы пустую область ошибки только для моего изображения BG. Это ошибка или что-то я делаю неправильно, я не слишком хорошо понимаю код, но, возможно, так я и делаю:
success: function (label) {
label.addClass ( "действительный");
},
Может быть не так. Если мне придется продолжать использовать пустое пространство, это не проблема, но это похоже на ошибку.
Кроме того, пока мы находимся в теме, есть ли простой способ по умолчанию для всех полевых сообщений установить значение по умолчанию "".
При отправке я хочу:
- рядом с каждым входом пустой интервал с ошибкой класса (если поле пустое)
- или класс, допустимый, если он проходит (если в поле есть содержимое).
Проблема в том, что span получает оба класса "error 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>
Разница лишь в том, что что-то есть в текстах сообщений!