如何通过Ajax提交和验证表单 [英] How to submit and validate a form via ajax

问题描述

请尝试通过使用Ajax同时向我的数据库提交并验证我的表单，但是它对我不起作用. 这是我的jQuery

Please I am trying to simultaneously submit and validate my form to my database through the use of Ajax, but it is not working for me. Here is my 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一起使用的正确方法?

The problem is when I submit the form,the Ajax form submit to itself. Please What is the right way to use the jquery validate and $.ajax together?

推荐答案

尝试一下(按预期方式为我工作):

Try this (working for me as expected):

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'];
?>

这篇关于如何通过Ajax提交和验证表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！