Question

我正在使用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

当其中一位同事提供帮助时，我接受了此代码，现在我想完成此操作。

Answer 1

尼克的回答几乎对我有用 - 但我想你还需要提交表格......

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

Answer 2

如果你正在使用validation plugin（我在问题上对此不清楚，但是它标记了这种方式）只需稍微移动你的代码。而不是：

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

您需要使用插件的submitHandler option，此功能仅在表单成功通过验证并正在提交后运行，如下所示：

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

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

Answer 3

可能是这样的：

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

然后在validateFunction中，如果一切顺利，请致电document.form.submit()，这将处理您的加载对话框并发送表单。

另外，作为附注，由于您声明使用jquery进行验证，因此使用当前设置时，禁用javascript的人仍然可以提交无效数据（导致各种丢弃表等等）。使用此方法（在脚本中调用提交），他们将无法发送AT ALL。

另一条路线是：

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

在验证功能结束时，如果可以发送，则将其设置为返回（true / false）。然后在服务器端重新验证，使用PHP或其他任何东西，如果有任何问题则返回错误。这允许没有javascript的用户仍然尝试发送但不会让他们破坏您的网站。

用于验证和提交的jquery消息

3 个答案: