Fatal编程技术网

Javascript JQuery验证成功方法

javascript jquery validation

Javascript JQuery验证成功方法,javascript,jquery,validation,Javascript,Jquery,Validation,我有以下代码： <!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/ht

我有以下代码：

<!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>
不过，我希望我的bg图像的错误范围为空。这是一个bug还是我做错了什么，我不太理解代码，但可能是我这样做的方式：

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

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

此外，当我们讨论这个主题时，是否有任何简单的方法可以将所有字段消息的默认值设置为“”

提交时，我希望： -每个输入旁边都有一个带类错误的空白范围（如果字段为空） -或者，如果类通过，则该类有效（如果字段包含内容）

问题是，即使字段为空，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>


无标题文件
$（文档）.ready（函数（）{
$（“#我的表格”）。验证({
规则：{
正文1：{
必填项：true
},
}, 
消息：{
文本1:“，
} ,
错误元素：“span”，
成功：“有效”，
});
});
广度误差{
浮动：左侧；宽度：15px；高度：15px；
背景：红色；
}
有效的{
显示：块；宽度：15px；高度：15px；
背景：绿色；
}
案文1：
你会发现这是行不通的。但这是可行的：

        messages: { 
            text1: "&nbsp;",
            text2: "&nbsp;",
        } ,

<!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>


无标题文件
$（文档）.ready（函数（）{
$（“#我的表格”）。验证({
规则：{
正文1：{
必填项：true
},
}, 
消息：{
文本1:“，
} ,
错误元素：“span”，
成功：“有效”，
});
});
广度误差{
浮动：左侧；宽度：15px；高度：15px；
背景：红色；
}
有效的{
显示：块；宽度：15px；高度：15px；
背景：绿色；
}
案文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"
   });
});
如果这对您有效，请选中我的答案旁边的复选标记。我正试图获得足够的声誉来发表评论。谢谢