Question

我有以下代码：

<!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: "&nbsp;",
            text2: "&nbsp;",
        } ,

但是我想为我的bg图像添加空错误。这是一个错误或我做错了什么，我不太了解代码，但也许我正在这样做：

成功：功能（标签）{ label.addClass（ “有效”）; }，

可能是错的。如果我必须继续使用一个空的空间，这没什么大不了的，但它似乎是一个错误。

同样，当我们讨论主题时，有任何简单的方法可以将所有字段消息默认为默认值“”。

提交时，我想要： - 每个输入旁边有一个带有类错误的空跨度（如果该字段为空） - 或者如果该类通过则该类有效（如果该字段具有内容）。

问题是，即使字段为空，跨度也会使两个类“错误有效”。但是，如果我有一个错误消息文本在其中工作，但理想情况下我不希望任何错误消息文本。我认为这可能是一个错误。请参阅最简单的示例：

<!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: "&nbsp;",
        } ,
        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>

唯一不同的是在消息文本中有一些东西！

Answer 1

试

$(document).ready(function() {
   $("#my-form").validate({
      rules: {
         text1: {
            required: true
         }
         text2: {
            required: true
         }
      },
      messages: {
         text1: {
            required: "Please fill out text1."
         }
         text2: {
            required: "Please fill out text2."
         }
      },
      errorLabelContainer: ".errtxt",
      success: "valid"
   });
});

如果这对您有用，请选择我的答案旁边的复选标记。我正试图获得足够的声誉留下评论。谢谢！

JQuery使用Success方法验证

1 个答案: