Javascript 如何检查jquery.validate（）中是否存在错误_Javascript_Jquery_Html_Jquery Validate

Javascript 如何检查jquery.validate（）中是否存在错误

javascript jquery html

Javascript 如何检查jquery.validate（）中是否存在错误,javascript,jquery,html,jquery-validate,Javascript,Jquery,Html,Jquery Validate,我在创建代码时遇到了一些问题，只有在所有文本字段都正确验证的情况下，代码才会显示一个按钮。当页面打开时，我隐藏了按钮（我知道我可以使用css来实现这一点，但我只是尝试了解功能），我想在字段正确时显示按钮。我试图使用success选项，但它只是在填写任何内容之前立即显示按钮。有什么建议吗？代码如下： <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

我在创建代码时遇到了一些问题，只有在所有文本字段都正确验证的情况下，代码才会显示一个按钮。当页面打开时，我隐藏了按钮（我知道我可以使用css来实现这一点，但我只是尝试了解功能），我想在字段正确时显示按钮。我试图使用success选项，但它只是在填写任何内容之前立即显示按钮。有什么建议吗？代码如下：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
<script type="text/javascript" src="js\jquery.validate.js"></script>
<script>
$(document).ready(function(){
var submit = false;
$(".btn").hide();
 $("#submission").validate({
   rules: {
      appSize: { 
         required:true,
         max:12 },
      appName: { 
         required:true,
         rangelength:[4,9] },
      appPrice: { 
         required:true,
         min:.99,
         max:3.99 },
      email: { 
         required:true,
         email:true }
   },

   messages: { 
      appSize: {
      required: "App Size is a required field"},
      appName: { 
         required: "App Name is a required field",
         rangelength: "The name must be between 4 and 9 characters" },
      appPrice: { 
         required: "App Price is a required field",
         min: "Price must be .99 or greater",
         max: "Price must be less than 3.99" },
      email: { 
         required: "email is a required field",
         email: "You must enter a valid email address" },
      success: submit = true

   },
   errorElement: "div",




 });
 if(submit)
    $(".btn").show();
 $(".btn").click(function() {

     alert("Data is Valid, Thanks for your submission");    
   });
});

</script>
</head>
<body>
<form id="submission" method="post" action="#">
  <h1>Apple iPhone App Contest Submission Page</h1>
    <div id="theForm">
        <div>
                 <label for="appSize">What is the file size in KB?</label>
                 <input name="appSize" type="text" id="fileSize" class="required error"></input>
        </div>
        <br />
        <div>
                 <label for="appName">What is the App Name?</label>
                 <input name="appName" type="text" id="appName" class="required error"></input>
        </div>
        <br />
         <div>
                 <label for="appPrice">What is the App Price?  $</label>
                 <input name="appPrice" type="text" id="appPrice" class="required error"></input>
        </div>
        <br />
        <div>
                 <label for="email">Submitters Email Address</label>
                 <input name="email" type="text" id="email" class="required error"></input>
        </div>
        <br /> 
       <input type="button" class="btn" value="Submit"></input>
     </div>
</form>
</body>
</html>


$（文档）.ready（函数（）{
var submit=false；
$（“.btn”）.hide（）；
$（“#提交”）。验证({
规则：{
appSize:{
要求：正确，
max:12}，
appName:{
要求：正确，
rangelength:[4,9]}，
应用价格：{
要求：正确，
最小：.99，
最大值：3.99}，
电邮：{
要求：正确，
电子邮件：true}
},
消息：{
应用程序大小：{
必填：“应用程序大小是必填字段”}，
appName:{
必填：“应用程序名称是必填字段”，
rangelength:“名称必须介于4到9个字符之间”}，
应用价格：{
必填：“应用程序价格是必填字段”，
最小值：“价格必须为.99或更高”，
最大值：“价格必须小于3.99”}，
电邮：{
必填：“电子邮件是必填字段”，
电子邮件：“您必须输入有效的电子邮件地址”}，
成功：提交=true
},
错误元素：“div”，
});
如果（提交）
$（“.btn”）.show（）；
$（“.btn”）。单击（函数（）{
警报（“数据有效，感谢您的提交”）；
});
});
苹果iPhone应用程序竞赛提交页面
文件大小（KB）是多少？


应用程序名是什么？


应用程序的价格是多少$


提交者的电子邮件地址

你的计划是行不通的

为该属性分配一个函数，并在其中执行您需要执行的操作。

您的代码对我来说似乎有点困惑。。。如果隐藏“提交”按钮，您认为如何提交表单？

我认为您可以将一些“onchange”事件绑定到所有表单输入以调用验证。。。但这可能意味着，即使在填充输入时从一个输入传递到另一个输入，也会触发验证。

事实上，我不得不绕过原始输入，因为我无法获得太多帮助。以下是我的最终项目构建：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Thu, 01 Dec 2011 17:34:38 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
   h1 {
   text-align:center;
   background: #7AC5CD;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -moz-box-shadow: 5px 5px 5px #000;
   -webkit-box-shadow: 5px 5px 5px #000;
   box-shadow: 5px 5px 5px #000;
   background: -moz-linear-gradient(top, #55aaee, #003366);
   background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));
   color: #000000; 
   height: auto; 
   padding: 5px;}
   form {
   background-color:#faefae;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -moz-box-shadow: 5px 5px 5px #000;
   -webkit-box-shadow: 5px 5px 5px #000;
   box-shadow: 5px 5px 5px #000; }
   body {
   background-color:#7AC5CD; }
   .required {
   border:inset; 
   position:absolute;
   left:200px;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -moz-box-shadow: 5px 5px 5px #000;
   -webkit-box-shadow: 5px 5px 5px #000;
   box-shadow: 5px 5px 5px #000; }
   .btn {
   position:absolute;
   left:600px;
   top:120px;
   width:125px;
   height:50px;
   font-size:larger;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -moz-box-shadow: 5px 5px 5px #000;
   -webkit-box-shadow: 5px 5px 5px #000;
   box-shadow: 5px 5px 5px #000; }
   div.error {
   font-size:large; 
   color:red;
   font-family:arial;
   font-style:italic;}
   .images {
   alignment-adjust:absolute;
   position:absolute;
   text-align:center; 
   left:450px;
   background:#7AC5CD;
   background-color:#7AC5CD;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
<script type="text/javascript" src="js\jquery.validate.js"></script>
<script>
$(document).ready(function(){
 $("#submission").validate({
   rules: {
      appSize: { 
         required:true,
         max:12 },
      appName: { 
         required:true,
         rangelength:[4,9] },
      appPrice: { 
         required:true,
         min:.99,
         max:3.99 },
      email: { 
         required:true,
         email:true }
   },
   messages: { 
      appSize: {
      required: "App Size is a required field"},
      appName: { 
         required: "App Name is a required field",
         rangelength: "The name must be between 4 and 9 characters" },
      appPrice: { 
         required: "App Price is a required field",
         min: "Price must be .99 or greater",
         max: "Price must be less than 3.99" },
      email: { 
         required: "email is a required field",
         email: "You must enter a valid email address" }

   },
   errorElement: "div"


 });

});
</script>
     </head>
       <body>
         <form id="submission" method="post" action="#">
           <h1>Apple iPhone App Contest Submission Page</h1>
          <div id="theForm">
              <div>
                <label for="appSize">What is the file size in KB?</label>
                <input name="appSize" type="text" id="fileSize" class="required"></input>
              </div>
              <br />
              <div>
                <label for="appName">What is the App Name?</label>
                <input name="appName" type="text" id="appName" class="required"></input>
             </div>
             <br />
             <div>
                <label for="appPrice">What is the App Price?  $</label>
                <input name="appPrice" type="text" id="appPrice" class="required"></input>
             </div>
             <br />
             <div>
                     <label for="email">Submitters Email Address</label>
                     <input name="email" type="text" id="email" class="required"></input>
            </div>
            <br /> 
           <input type="submit" class="btn" value="Submit"/>
         </div>
    </form>
  </body>
</html>


h1{
文本对齐：居中；
背景：7AC5CD；
-moz边界半径：7px；
边界半径：7px；
-莫兹盒阴影：5px 5px 5px#000；
-网络工具包盒阴影：5px 5px 5px#000；
盒影：5px 5px 5px#000；
背景：-莫兹线性梯度（顶部，#55aaee，#003366）；
背景：-webkit渐变（线性、左上、左下、从（#55aaee）到（#003366））；
颜色：#000000；
高度：自动；
填充：5px；}
形式{
背景色：#faefae；
-moz边界半径：7px；
边界半径：7px；
-莫兹盒阴影：5px 5px 5px#000；
-网络工具包盒阴影：5px 5px 5px#000；
盒影：5px 5px 5px#000；}
身体{
背景色：#7AC5CD；}
.必须{
边框：插图；
位置：绝对位置；
左：200px；
-moz边界半径：7px；
边界半径：7px；
-莫兹盒阴影：5px 5px 5px#000；
-网络工具包盒阴影：5px 5px 5px#000；
盒影：5px 5px 5px#000；}
.btn{
位置：绝对位置；
左：600px；
顶部：120px；
宽度：125px；
高度：50px；
字体大小：较大；
-moz边界半径：7px；
边界半径：7px；
-莫兹盒阴影：5px 5px 5px#000；
-网络工具包盒阴影：5px 5px 5px#000；
盒影：5px 5px 5px#000；}
分区错误{
字体大小：大号；
颜色：红色；
字体系列：arial；
字体样式：斜体；}
.图像{
校准调整：绝对校准；
位置：绝对位置；
文本对齐：居中；
左：450px；
背景：7AC5CD；
背景色：#7AC5CD；}
$（文档）.ready（函数（）{
$（“#提交”）。验证({
规则：{
appSize:{
要求：正确，
max:12}，
appName:{
要求：正确，
rangelength:[4,9]}，
应用价格：{
要求：正确，
最小：.99，
最大值：3.99}，
电邮：{
要求：正确，
电子邮件：true}
},
消息：{
应用程序大小：{
必填：“应用程序大小是必填字段”}，
appName:{
必填：“应用程序名称是必填字段”，
rangelength:“名称必须介于4到9个字符之间”}，
应用价格：{
必填：“应用程序价格是必填字段”，
最小值：“价格必须为.99或更高”，
最大值：“价格必须小于3.99”}，
电邮：{
必填：“电子邮件是必填字段”，
电子邮件：“您必须输入有效的电子邮件地址”}
},
错误元素：“div”
});
});
苹果iPhone应用程序竞赛提交页面
文件大小（KB）是多少？


应用程序名是什么？


应用程序的价格是多少$


提交者的电子邮件地址

我不知道我是否完全确定如何做到这一点。。。这是我第一次使用jquery验证插件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Thu, 01 Dec 2011 17:34:38 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
   h1 {
   text-align:center;
   background: #7AC5CD;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -moz-box-shadow: 5px 5px 5px #000;
   -webkit-box-shadow: 5px 5px 5px #000;
   box-shadow: 5px 5px 5px #000;
   background: -moz-linear-gradient(top, #55aaee, #003366);
   background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));
   color: #000000; 
   height: auto; 
   padding: 5px;}
   form {
   background-color:#faefae;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -moz-box-shadow: 5px 5px 5px #000;
   -webkit-box-shadow: 5px 5px 5px #000;
   box-shadow: 5px 5px 5px #000; }
   body {
   background-color:#7AC5CD; }
   .required {
   border:inset; 
   position:absolute;
   left:200px;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -moz-box-shadow: 5px 5px 5px #000;
   -webkit-box-shadow: 5px 5px 5px #000;
   box-shadow: 5px 5px 5px #000; }
   .btn {
   position:absolute;
   left:600px;
   top:120px;
   width:125px;
   height:50px;
   font-size:larger;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -moz-box-shadow: 5px 5px 5px #000;
   -webkit-box-shadow: 5px 5px 5px #000;
   box-shadow: 5px 5px 5px #000; }
   div.error {
   font-size:large; 
   color:red;
   font-family:arial;
   font-style:italic;}
   .images {
   alignment-adjust:absolute;
   position:absolute;
   text-align:center; 
   left:450px;
   background:#7AC5CD;
   background-color:#7AC5CD;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
<script type="text/javascript" src="js\jquery.validate.js"></script>
<script>
$(document).ready(function(){
 $("#submission").validate({
   rules: {
      appSize: { 
         required:true,
         max:12 },
      appName: { 
         required:true,
         rangelength:[4,9] },
      appPrice: { 
         required:true,
         min:.99,
         max:3.99 },
      email: { 
         required:true,
         email:true }
   },
   messages: { 
      appSize: {
      required: "App Size is a required field"},
      appName: { 
         required: "App Name is a required field",
         rangelength: "The name must be between 4 and 9 characters" },
      appPrice: { 
         required: "App Price is a required field",
         min: "Price must be .99 or greater",
         max: "Price must be less than 3.99" },
      email: { 
         required: "email is a required field",
         email: "You must enter a valid email address" }

   },
   errorElement: "div"


 });

});
</script>
     </head>
       <body>
         <form id="submission" method="post" action="#">
           <h1>Apple iPhone App Contest Submission Page</h1>
          <div id="theForm">
              <div>
                <label for="appSize">What is the file size in KB?</label>
                <input name="appSize" type="text" id="fileSize" class="required"></input>
              </div>
              <br />
              <div>
                <label for="appName">What is the App Name?</label>
                <input name="appName" type="text" id="appName" class="required"></input>
             </div>
             <br />
             <div>
                <label for="appPrice">What is the App Price?  $</label>
                <input name="appPrice" type="text" id="appPrice" class="required"></input>
             </div>
             <br />
             <div>
                     <label for="email">Submitters Email Address</label>
                     <input name="email" type="text" id="email" class="required"></input>
            </div>
            <br /> 
           <input type="submit" class="btn" value="Submit"/>
         </div>
    </form>
  </body>
</html>