jquery验证和提交消息

我正在使用jquery来验证我的表单中的每个字段，并使用jquery在提交表单后显示“加载”消息。现在，在我的情况下，当我点击提交按钮时将会显示验证消息以及加载消息，我感到困惑。一旦一切正确，我只需要显示加载消息。jquery验证和提交消息

<html lang="en"> 
    <head> 
     <title>SO question 3377468</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('#form').submit(function() { 
        $('#progress').show(); 
       }); 
      }); 
     </script> 
     <style> 
      #progress { 
       display: none; 
       color: green; 
      } 
     </style>    
    </head> 
    <body> 
     <form id="form" action="servlet-url" method="post"> 
      ... 
      <input type="submit"> 
     </form> 
     <div id="progress">Please wait...</div> 
    </body> 
</html>

How to show jquery message after clicking on submit button

我拿着时的一个同事曾经帮助这个代码，现在我要完成这一点。

来源

2010-08-01 maas

哪里是你的验证代码？ – Jhong 2010-08-01 10:48:51

可能是这样的：

<input type="button" value="SUBMIT" onclick="validateFunction()">

然后在你的validateFunction，在结束时，如果它是所有好去然后调用document.form.submit()将处理您的加载对话框，并发送表单。另外，作为一个方面说明，因为你说你正在使用jquery进行验证，在你当前的设置下，一个禁用javascript的人仍然可以提交无效数据（导致各种drop table和whatnot）。通过这种方法（在脚本中调用提交），他们将无法发送AT ALL。

另一条路线是：

<input type="submit" onclick="validateFunction();return false;">

而在你的验证功能月底将其设置为返回（真/假）如果可以发送或不。然后在服务器端重新验证，使用PHP或其他方法，并在出现任何问题时返回错误。这允许没有javascript的用户仍然尝试发送，但不让他们销毁您的网站。

来源

2010-08-01 10:53:21 WSkid

我建议把一个.click放在提交按钮上，而不是把onclick函数调用放入input属性本身。使代码调试更简单。 – Chris 2010-08-01 11:00:25

我仍然收到了这两个消息 – maas 2010-08-01 11:17:15

如果您使用的是validation plugin（我对此问题不清楚，但是标记为这种方式），只需将代码移动一下即可。取而代之的是：

$(document).ready(function() { 
    $('#form').submit(function() { 
     $('#progress').show(); 
    }); 
});

您将要使用的插件的submitHandler option，这个功能只能运行一种形式具有成功通过验证并提交，这样以后：

$("#form").validate({ 
    //other options... 
    submitHandler: function() { 
    $('#progress').show(); 
    } 
});

这意味着只需删除第一块代码即可，submitHandler代码就是您应该留给#progress的所有东西。

来源

2010-08-01 11:11:25

尼克的回答几乎是为我工作 - 但我认为你也需要再提交表单...

$(document).ready(function(){ 
    $("#form").validate({ 
     //other options... 
     submitHandler: function() { 
      $('#progress').show(); 
      form.submit(); 
     } 
    }); 
});

来源

2011-01-16 22:31:18

这会更好地作为对其他答案的评论。 – 2012-12-02 02:11:00

jquery验证和提交消息

回答

相关问题