如何使用 JQuery 和 Ajax 验证表单字段并将表单数据发布到服务器？

我正在尝试验证表单字段，例如姓名（不得为空）、Email_id（必须有效）、手机（必须有效）。填写所有信息后，我必须将此信息发送到服务器，并将响应重定向到不同的页面。这里什么都不起作用,

我的表单.html

<form class="form-horizontal" id="scheduleLaterForm" name="scheduleLaterForm">
    <div class="col-lg-8">      
        <div class="fieldgroup">
            <label class="col-lg-3 control-label" for="userName">Name:<font
                style="color: red;">*</font></label>
            <div class="col-lg-9">
                <input style=" height: 30px;" class="form-control" id="userName" name="userName"
                    placeholder="Full Name" value="" type="text" required>
            </div>
        </div>

        <div class="fieldgroup">
            <label for="email" class="col-lg-3 control-label">Email:<font
                style="color: red;">*</font></label>
            <div class="col-lg-9">
                <input style="height: 30px;" class="form-control" name="email"
                    id="email" placeholder="[email protected] /cdn-cgi/l/email-protection" value=""
                    type="text" required>
            </div>
        </div>

        <div class="fieldgroup">
            <label for="userContactNumber" class="col-lg-3 control-label">Mobile:<font
                style="color: red;">*</font></label>
            <div class="col-lg-9">
                <input style="height: 30px; width:100%;" class="form-control" id="userContactNumber"
                    name="userContactNumber" placeholder="Mobile Number"
                    onkeypress="enableKeys(event);" maxlength="10" type="text" required>
            </div>
        </div>

        <div class="fieldgroup">
            <label class="col-lg-3 control-label"></label>
                <div class="col-lg-7">
                    <input type="submit" value="Register" id="btnBooking" class="submit">
                </div>
        </div>
    </div>                                  
</form>

用于验证表单和发送数据的脚本

 <script>
    $(document).ready(function(){
        $("#scheduleLaterForm").validate({
            rules: {
                userName: "required",                           
                email: {
                    required: true,
                    email: true
                },                                              
                userContactNumber: "required"                       
            },
            messages: {
                userName: "Please enter your Name",
                userContactNumber: "Please enter your Mobile number",                           
                email: "Please enter a valid email address",                                           
            },
            submitHandler: function(form) {
                // get values from textboxs 
                var uName = $('#userName').val();
                var mailId = $('#addressemailId').val();
                var mobNum = $('#userContactNumber').val();

                $.ajax({
                    url:"http://localhost/services/bookService4Homes.php",
                    type:"GET",
                    dataType:"json",
                    data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
                    //type: should be same in server code, otherwise code will not run
                    ContentType:"application/json",
                    success: function(response){
                         alert("success");
                        //alert(JSON.stringify(response));
                    },
                    error: function(err){
                         alert("fail");
                        //alert(JSON.stringify(err));
                    }
                });
                return false; // block regular submit
            }
        });
    });
</script> 

Php code

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
mysql_connect("localhost","root","root");
mysql_select_db("service4homes");
if(isset($_GET['type']))
{
    if($_GET['type']=="booking"){
        $name = $_GET ['Name'];
        $mobile = $_GET ['Mob_Num'];
        $mail = $_GET ['Email'];    

        $query1 = "insert into customer(cust_name, cust_mobile, cust_email) values('$name','$mobile','$mail')";
        $result1=mysql_query($query1);
    }
}
else{
    echo "Invalid format";
}
?>

• 您不需要外部click处理程序，因为插件会自动捕获click (of a type="submit"）并阻止提交。

• 你需要一个input or button在你的form那是type="submit"，否则插件根本不会被触发。

• 你不能有一个外部.ajax当你有功能时form.submit内submitHandler你的.validate()方法。这意味着插件正在尝试提交表单，而您的点击处理程序正在尝试使用ajax。他们不能同时工作。根据文档，任何ajax属于内submitHandler，它是“验证后通过 Ajax 提交表单的正确位置” http://jqueryvalidation.org/validate/#submithandler.

• 您不需要检查表单有效性，因为当您使用内置的submitHandler，这也是自动完成的。

• jQuery4U 代码只不过是复杂的垃圾；一切都可以大大简化。除了给那些寻求指导的人带来更多困惑之外，它没有任何有用的目的。它来自 Sam Deering 的一个流行但解释不清的在线演示/教程，该演示/教程与许多地方都有链接。

  $(document).ready(function(){
  
      $("#register-form").validate({
          rules: {
              userName: "required",                           
              email: {
                  required: true,
                  email: true
              },                                              
              userContactNumber: "required"                       
          },
          messages: {
              userName: "Please enter your Name",
              userContactNumber: "Please enter your Mobile number",                           
              email: "Please enter a valid email address",                                           
          },
          submitHandler: function(form) {
  
              // get values from textboxs 
              var uName = $('#userName').val();
              var mailId = $('#addressemailId').val();
              var mobNum = $('#userContactNumber').val();
  
              $.ajax({
                  url:"http://192.168.1.11/services/bookService4Homes.php",
                  type:"POST",
                  dataType:"json",
                  data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
                  //type: should be same in server code, otherwise code will not run
                  ContentType:"application/json",
                  success: function(response){
                      //alert(JSON.stringify(response));
                  },
                  error: function(err){
                      //alert(JSON.stringify(err));
                  }
              });
              return false; // block regular submit
          }
      });
  
  });
  

DEMO: http://jsfiddle.net/mh6cvf2u/ http://jsfiddle.net/mh6cvf2u/