提交与阿贾克斯表格后jQuery的验证是全成 [英] Submitting a form with ajax after jQuery validation is successfull

问题描述

好了，所以我有我验证与jQuery验证的一种形式，我想现在AJAX提交。随着code以下，一旦形式是有效的，你点击提交页面重新加载和投入都放在URL地址栏（即方法=获取）

在AJAX方法我有一个设置为 POST ，但它似乎并没有使用Ajax调用。

我做了什么错？

  $（）。就绪（函数（）{
            变量$形式= $（本）;
           //验证的KEYUP查询表格，提交
            $（＃inquiryForm）。验证（{
                showErrors：功能（errorMap，errorList）
                {
                    为（在errorMap VAR错误）
                    {
                        $ .growl.error（{消息：errorMap [错误]}）;
                     }
                }，
                的onkeyup：假的，
                规则：{
                    全名： {
                        要求：真实的
                    }，
                    电子邮件： {
                        要求：真实，
                        电子邮件：真实的
                    }，
                    查询： {
                        要求：真实，
                        MINLENGTH：5，
                        最大长度：500
                    }
                }，
                消息：{
                    全名：你的名字是必需的，
                    电子邮件：一个有效的电子邮件地址是必需的，
                    询问：您的查询是必需的，必须有5-500字符之间
                }，

                submitHandler：功能（形式）{
                    $阿贾克斯（{
                        网址：form_submit / inquiry_form / inquiry_form.php，
                        键入：POST，
                        数据：$（形式）.serialize（）
                        成功：函数（响应）{
                            $（'＃inquiryFormHolder）HTML（你的形式提交！）。
                        }
                    }）;
                    返回false;
                }
            }）;
        }）;
 

解决方案

尝试使用：

  submitHandler：功能（形式）{
    $阿贾克斯（{
        网址：form_submit / inquiry_form / inquiry_form.php，
        键入：POST，
        数据：$（形式）.serialize（）
        成功：函数（响应）{
                     $（'＃inquiryFormHolder）HTML（你的形式提交！）。
                 }
         }）;
    $ form.submit（）;
 }
 

Ok so I have a form that I am validating with jQuery Validation and I am trying to now submit it with AJAX. With the code below, once the form is valid and you click on submit the page reloads and the inputs are placed in the url address bar (i.e. method="get")

In the ajax method I have that set to POST but it doesn't appear to be using the ajax call.

What did I do wrong?

$().ready(function() {
            var $form = $(this);
           //validate the inquiry form on keyup and submit
            $("#inquiryForm").validate({
                showErrors: function(errorMap, errorList) 
                {
                    for (var error in errorMap) 
                    {
                        $.growl.error({ message: errorMap[error] });
                     }
                },
                onkeyup: false,
                rules: {
                    fullName: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    inquiry: {
                        required: true,
                        minlength: 5,
                        maxlength: 500
                    }
                },
                messages: {
                    fullName: "Your name is required",
                    email: "A valid email address is required",
                    inquiry: "Your inquiry is required and must have between 5-500 characters"
                },

                submitHandler: function(form) {
                    $.ajax({
                        url: form_submit/inquiry_form/inquiry_form.php,
                        type: "POST",
                        data: $(form).serialize(),
                        success: function(response) {
                            $('#inquiryFormHolder').html("Your form was submitted!");
                        }            
                    });
                    return false;
                }
            });
        });

解决方案

Try to use :

submitHandler: function(form) {
    $.ajax({
        url: form_submit/inquiry_form/inquiry_form.php,
        type: "POST",
        data: $(form).serialize(),
        success: function(response) {
                     $('#inquiryFormHolder').html("Your form was submitted!");
                 }            
         });
    $form.submit();
 }

这篇关于提交与阿贾克斯表格后jQuery的验证是全成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！