使用jQuery验证表单后如何发送数据？答案

【问题标题】：How to send data after form has been validated using jQuery?使用jQuery验证表单后如何发送数据？
【发布时间】：2010-09-26 07:15:58
【问题描述】：

我有一个简单的电子邮件地址注册表如下：

<form action="" id="newsletterform" method="get">
      <input type="text" name="email" class="required email" id="textnewsletter"  />
      <input type="submit" id="signup" />
</form>

这是我想要做的：

验证表单以查找空字符串或用户单击提交或按回车键填写错误的电子邮件地址。
如果发生上述情况之一（空字符串等），我想生成一个错误通知用户。
然后，一旦用户填写正确格式的电子邮件地址并点击提交（或输入），我希望表单将电子邮件地址发送到我在 jQuery 代码中指定的任何位置，然后生成一点“感谢您注册通知” "，无需重新加载浏览器。

我看了太多教程，这个阶段我的眼睛很痛，所以请不要给我指任何网址（我很可能去过那里）。

如果有人可以提供一个准系统大纲，将不胜感激。

【问题讨论】：

标签： jquery ajax validation forms

【解决方案1】：

首先，请确保您在服务器端进行所有验证。我喜欢让我的表单在没有任何 JavaScript 的情况下工作。我假设你已经做了那么多。

****原始答案***

然后，将“提交”元素更改为按钮元素。在按钮元素的 OnClick 上，运行验证的 JavaScript 函数。如您所知，有很多关于如何做到这一点的示例。

如果验证失败，请发送警报。如果成功，使用 JavaScript 提交表单。

****新，使用答案的工具***

您也可以使用 JQuery 作为（orip 指出），它的插件可以做到这一点。他们处理了很多艰苦的工作。请确保我的 cmets 讲的是正确的故事。此代码还执行 AJAX 提交。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- Load JQuery on your page -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <!-- Load JQuery validation sytles and (rules?) on your page -->
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.css" type="text/css" media="screen" />
    <!-- Load JQuery validation plugin on your page -->
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
    <!-- Load JQuery form plugin on your page -->
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/plugins/form/jquery.form.js"></script>
  <script type="text/javascript" language="javascript">
    //Wait until the document is loaded, then call the validation.  Due to magic in JQuery or the plugin
    //  this only happens when the form is submitted.
  $(document).ready(function(){
        //When the submit button is clicked
        $("#signup").click(function() {
            //if the form is valid according to the fules
            if ($("#newsletterform").valid()) {
                //Submit the form via AJAX
                $('#newsletterform').ajaxForm(function() { 
                    //this alert lets me know the submission was successfull
                    alert("Thank you!"); }); 
                }
            })
  });
  </script>
    <!-- Just some styles -->
    <style type="text/css">
            * { font-family: Verdana; font-size: 96%; }
            label { width: 10em; float: left; }
            label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
            p { clear: both; }
            .submit { margin-left: 12em; }
            em { font-weight: bold; padding-right: 1em; vertical-align: top; }
    </style>  
</head>
<body>
    <form action="" id="newsletterform" method="get">
        <!-- The classes assigned here are where the validation rules come fome.  
        This is required, and it must be an email -->
        <input type="text" name="email" class="required email" id="textnewsletter"  />
        <input type="submit" id="signup" />
    </form>
</body>
</html>

这不是您可以编写的最紧凑的代码，但可以作为示例。

【讨论】：

感谢您的回复。 MY Newsletter 服务将提供服务器端验证，所以这不是问题。代码示例会很棒！
我从 orip 指出的页面上几乎批发地偷了那个。
天哪，谢谢！快速提问，我将在哪里填写 url 以在 JQuery 中处理表单（例如，接收电子邮件地址）？
它是基于表单的动作。

【解决方案2】：

使用jQuery Validation Plugin。

使用它，您无需修改表单 - 只有在验证通过时才会提交。它可以为您节省大量时间和复杂性。

编辑：

为防止页面重新加载，请使用插件的“submitHandler”选项提交自己：

$('#myform').validate({
   // ...
   submitHandler: function() { alert("submitted"); }
});

或使用 jQuery Form Plugin 将您的表单提交转换为 AJAX 提交 - 验证插件与之集成。

【讨论】：

感谢您的帮助 orip。我试过了，验证很好，但我似乎无法在不重新加载页面的情况下提交表单？
好吧，我可以……但正如我所说，我希望在不重新加载浏览器的情况下提交表单，这是我想要实现的一个完美示例：vouchercodes.co.uk - 请参阅下面的时事通讯导航，谢谢

【解决方案3】：

感谢大家的帮助。

我有一个完美的解决方案，可以按照我想要的方式运行（不得不雇用某人 :) - 任何人，对于其他需要它的人，给你：

$(document).ready(function () {
      $('#textnewsletter').click(function () 
      {
            if($('#textnewsletter').val()=='Your email address')
                  $(this).attr("value",'');
      });

      $('form#newslattersub').submit(function () 
      {
            if(!isEmail($('#textnewsletter').val() ))
            {
                  $('p.idmsg').html('<span class="error">Please enter a valid email             address</span>').hide().fadeIn("slow");

                }
                else{
                    $.post($('form#newslattersub').attr('action'), { email:$('#textnewsletter').val() },function(data){
                        $('p.idmsg').html('<span class="success">Thanks for signing up! Please check your email for confirmation!</span>').hide().fadeIn("slow");
                         //alert("server return " + data);
                    });


                }
                return false;


            });

        });

【讨论】：