如何通过 ajax 提交和验证表单答案

【问题标题】：How to submit and validate a form via ajax如何通过 ajax 提交和验证表单
【发布时间】：2013-07-08 13:21:32
【问题描述】：

请我尝试通过使用 Ajax 同时向我的数据库提交和验证我的表单，但它不适合我。这是我的 jQuery

$(document).ready(function(){
       $(".button").click(function(){
             $("#myform").validate();

            //Ajax to process the form
       $.ajax({
           type: "POST",
           url: "process.php",
           data: { firstname: $("#firstname").val()},
           success: function(){
                               $('#message').html(data);
                               }
               });
          return false;
       });
      });

问题是当我提交表单时，Ajax 表单提交给自己。请问jquery validate和$.ajax一起使用的正确方法是什么？

【问题讨论】：

标签： php jquery jquery-validate

【解决方案1】：

将data 作为参数传递给您的成功函数：

success: function(data){

你的success 函数不会做任何事情，因为你还没有定义data

【讨论】：

【解决方案2】：

试试这个（按预期为我工作）：

HTML 表单：

<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/css/screen.css" />
<script src="http://jquery.bassistance.de/validate/lib/jquery.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script>    
// JQuery Script to submit Form
$(document).ready(function () {
    $("#commentForm").validate({
        submitHandler : function () {
            // your function if, validate is success
            $.ajax({
                type : "POST",
                url : "process.php",
                data : $('#commentForm').serialize(),
                success : function (data) {
                    $('#message').html(data);
                }
            });
        }
    });
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
    <fieldset>        
        <p>
            <label for="cname">Name (required, at least 2 characters)</label>
            <input id="cname" name="name" minlength="2" type="text" required />
            <p>
                <label for="cemail">E-Mail (required)</label>
                <input id="cemail" type="email" name="email" required />
            </p>
            <p>
                <label for="curl">URL (optional)</label>
                <input id="curl" type="url" name="url" />
            </p>
            <p>
                <label for="ccomment">Your comment (required)</label>
                <textarea id="ccomment" name="comment" required></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="Submit" />
            </p>
    </fieldset>
</form>

<div id="message"></div>

PHP 代码：

<?php
echo $_POST['email'];
?>

【讨论】：

它只是验证表单但不能提交表单
@user2418765：检查我新的完整代码并尝试找出您的代码中的问题。
再次感谢。我真的花了很多时间才完成这项工作
拜托我已经被这个网站禁止了，你能帮我摆脱禁令吗..谢谢
@Duahs：我没听明白，你想问什么..？

【解决方案3】：

您忘记传递响应

$(document).ready(function() {
    $(".button").click(function() {

        //check the validation like this
        if ($("#myform").valid()) {
            //Ajax to process the form
            $.ajax({
                type: "POST",
                url: "process.php",
                data: {
                    firstname: $("#firstname").val()
                },

                //you forget to passs the response
                success: function(response) {
                    $('#message').html(response);
                }
            });
            return false;
        }
    });
});

【讨论】：

$("#myform").validate() 此行已更新并添加完整的http url url：“process.php”，还要检查验证规则，如果一切正常，那么它会提交
，这只会验证表单，不能提交数据
stackoverflow.com/questions/7675053/… 试试这个提交处理程序
对不起，我遇到了同样的问题
您好 Sundar，您的答案有效，但您需要在提交之前双击提交按钮。

【解决方案4】：

首先，如果验证不通过，为什么要提交表单？试试这个，如果 validate 真的验证了：

$(function(){
    $(".button").click(function(){
        var myform = $("#myform");
        if (myform.validate()) {        
            $.post("process.php", myform.serialize(), function(data){
                $('#message').html(data);
            });            
        }
        return false;
    });     
});

【讨论】：

验证有效，提交无效，只提交给自己。