用于验证和提交的 jquery 消息

发布于 2024-09-12 12:01:15 字数 1187 浏览 1 评论 0原文

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

如何在单击提交按钮后显示 jquery 消息

我在一位同事的帮助下获取了这段代码，现在我想完成它。

原文

I am using the jquery to validate each field in my form and also using the jquery to show a "loading" message after submitting the form. Now, in my case I got confused when I clicked on the submit button the validation messages will be shown and also the loading message. I need only the loading message to be shown once everything is correct.

<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

I took this code when one of the colleagues had helped and now I want to complete this.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

舟遥客 2024-09-19 12:01:15

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

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

Nick's answer almost worked for me - but I think you also need to then submit the form ...

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

回复收藏 0 原文

疑心病 2024-09-19 12:01:15

如果您使用验证插件（我对此不清楚来自问题，但它是这样标记的）只需稍微移动一下代码即可。相反：

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

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

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

这意味着只需删除第一个代码块，即 submitHandler< /code> 代码是您应该为 #progress 内容留下的所有内容。

If you're using the validation plugin (I'm unclear on this from the question, but it's tagged that way) just move your code around a bit. Instead of this:

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

You'll want to use the submitHandler option of the plugin, this function only runs after a form has successfully passed validation and is being submitted, like this:

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

This means just remove that first block of code, the submitHandler code is all you should have left for the #progress stuff.

回复收藏 0 原文

原谅过去的我 2024-09-19 12:01:15

可能是这样的：

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

然后在您的 validateFunction 中，最后如果一切顺利，则调用 document.form.submit() 它将处理您的加载对话框并发送形式。

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

另一种路线是：

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

在验证函数的末尾，如果可以发送或不发送，请将其设置为 return(true/false)。然后使用 PHP 或其他方式在服务器端重新验证，如果出现任何问题，则返回错误。这允许没有 JavaScript 的用户仍然尝试发送，但不会让他们破坏您的网站。

Possibly something like:

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

Then in your validateFunction, at the end if it is all good to go then call document.form.submit() which will process your loading dialog and send the form.

Also, as a side note, since you stated you are using jquery for validation, with your current setup a person with javascript disabled could still submit invalid data (causing all sorts of drop tables and whatnot). With this method (the submit being called within the script), they won't be able to send AT ALL.

Another route is:

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

And at the end of your validate function set it to return(true/false) if it is okay to send or not. THEN re-validate on the server side, using PHP or whatever and return an error if any problems. This allows users without javascript to still attempt to send but not have them destroy your site.

回复收藏 0 原文

~没有更多了~