【问题标题】:jquery validate doesn't send formjquery validate 不发送表单
【发布时间】:2013-03-29 19:25:18
【问题描述】:

我正在使用 Jquery validate 插件来验证表单,验证一切都很好我的问题出在 submitHandler 函数中,由于某种原因我没有得到没有将表单发送到我的邮件,我检查了 php并且完全没问题。这是我正在做的更完整的文件http://jsfiddle.net/KszmV/

我需要做的其他事情,我不知道该怎么做,这是如何提交表单而无需再次加载页面并在表单末尾显示消息

这是我的脚本

<script type="text/javascript">
    $(document).ready(function(){

        $("#contactusform1").validate({
            rules: {
                "name": {
                    required: true,
                    minlength: 3
                },
                "phone":{
                    required:true,
                    digits:true
                },
               "email":{
                    required: true
                }

            },
            messages: {
                "name": {
                    required: "Please enter a name"
                },
                "phone":{
                    required: "Please provide a contact number"
                },
                "email":{
                    required: "Enter a valid email"
                }
            },
            errorPlacement: function(error, element) {
                error.insertAfter(element);
            },

            submitHandler: function (form) {    

                $.ajax({ 
                    type: 'POST', 
                    data: $('form').serialize(),
                    url: 'process-contact1.php', 
                    success: function () {

                    }                        

                });

                form.submit();
            }           

        });

    });
</script>

【问题讨论】:

  • 你为什么同时打电话给$.ajax()form.submit()
  • jQuery Form Plugin 有助于在不重新加载页面的情况下提交表单。
  • 我知道当你使用 $.ajax() 时使用 form.submit 是错误的,现在如果我取出 form.submit 表单不会清除字段(重置)我该怎么办这??甚至这样做我已经尝试过并且数据无论如何都不会发送......提前
  • $.ajax() 发送表单数据,form.submit() 再次发送,因此您只需要其中一个。如果您想在发送 AJAX 后清除表单数据,您必须在 JavaScript 中执行此操作,例如$(form).find("input").val('');
  • 如果你想在表单提交成功后重置表单,你应该在ajax success回调中使用form.reset()

标签: jquery forms jquery-validate


【解决方案1】:

你有一些问题

submitHandler: function (form) {    
    $.ajax({ 
        type: 'POST', 
        data: $(form).serialize(), // $(form) is ok here
        url: 'process-contact1.php', 
        success: function () {
        }                        
    });
    form.submit();  //<-- REMOVE this
    return false; //<-- ADD this
}

演示:http://jsfiddle.net/Y8cHm/

  • 删除form.submit(),因为插件已经在处理这个问题了。

  • 您需要在submitHandler 中添加一个return false,因为您正在使用ajax,否则您将获得正常的提交/页面刷新。

  • Your jsFiddle 缺少&lt;/form&gt; 标记。

  • Your jsFiddle 链接到插件的 gitHub page 而不是 the CDN.

  • $(form).serialize() 完全可以接受,如上面工作演示中所示。使用引号,$('form') 只是针对页面上的任何&lt;form&gt;。而$(form) 的目标是与已经传递给.validate() 函数的表单元素相同。 在您的演示中,它们都给出了相同的结果,尽管这可能不适用于所有其他情况。

【讨论】:

  • ty 像往常一样回答,我按照我说的做了,但表格还没有收到邮件,任何想法,我已经检查了我的 php,它很好,如果你需要它,我可以 jsfiddle成功:function () { form.reset(); $('#submitbtn').hide(); $('#success-line').show().fadeOut(7000, function(){ $('#submitbtn').show("slow"); }); }
猜你喜欢
  • 1970-01-01
  • 2011-04-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-09-23
  • 1970-01-01
  • 2017-11-01
  • 2016-07-17
相关资源
最近更新 更多