Question

我在创建代码时遇到一些问题，只有在所有文本字段都正确验证时才会显示按钮。我在页面打开时隐藏按钮（我知道我可以使用css来执行此操作，但我只是尝试计算功能）并且我想在字段正确时显示按钮。我正在尝试使用成功选项，但它只是在填写任何内容之前立即显示按钮。有什么建议？这是代码：

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

Answer 1

success: submit = true

这不符合您的意图。

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

Answer 2

您的代码似乎对我有点困惑...... 如果隐藏提交按钮，您认为如何提交表单？我认为您可以将一些“onchange”事件绑定到所有表单输入以调用验证...但这可能意味着即使您在填充它们时从输入传递到另一个输入，也会获得验证。

Answer 3

我实际上不得不解决原始问题，因为我无法得到很多帮助。这是我的最终项目构建：

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

如何在jquery .validate（）中检查没有错误

3 个答案: