Question

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

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

以下是我希望能够做到的事情：

验证表单以查找用户点击提交或点击输入的空字符串或填写错误的电子邮件地址。
如果出现上述情况之一（空字符串等），我想生成一个错误让用户知道。
然后，一旦用户填写了正确形成的电子邮件地址并点击提交（或输入），我希望表单将电子邮件地址发送到我在jQuery代码中指定的任何位置，然后生成一点“感谢您注册通知“，所有这些都没有重新加载浏览器。

我看了太多的教程，在这个阶段我的眼睛非常痛苦，所以请不要指向任何网址（我很可能已经在那里）。

如果有人可以提供做什么的准系统，那将非常感激。

Answer 1

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

****原始答案***

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

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

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

你也可以使用JQuery（orip指出）和它的插件来做到这一点。他们处理了很多艰苦的工作。请确保我的评论正在讲述正确的故事。这段代码也提交了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>

这不是你能写的最严密的代码，但它可以作为一个例子。

Answer 2

使用jQuery Validation Plugin。

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

编辑：

要阻止网页重新加载，请使用插件的“submitHandler”选项自行提交：

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

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

Answer 3

感谢所有帮助人员。

我有一个完全按照我想要的方式工作的解决方案（不得不雇用某人:) - Anywho，对于任何其他需要它的人，在这里你去：

$(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;


            });

        });

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

3 个答案: