Jquery SubmitHandler中的Ajax表單提交不起作用

Question

我需要使用jQuery Validation Plugin驗證表單並將數據提交到數據庫，而無需刷新頁面。 我表單中的所有字段均標記為必填項。 但是，即使字段為空，也會提交字段。 此外，頁面會不斷刷新。

這是我的JavaScript代碼：

    $('#submitButton').click(function() {  
    $("#myForm").validate({
       debug: true,
       rules: {
            name: {
                required: true
            },
            user_mail: {
                required: true
            }
       },
       messages:{
           //messages     
       },
       submitHandler(function(form) {
            $.ajax({  
              type: 'POST',
              url: $(this).attr('action'),
              data: $(this).serialize(),
              dataType : 'json',
              success(function(data) {
                if (data){
                    alert("success");
                    $(this)[0].reset();
                }
              })
            });
            return false;
        });
  });
}

這就是php的樣子

  <?php

    function NewUser(){ 
    $fullname = $_POST['name']; 
    $emailaddress = $_POST['user_mail']; 


    $query = "INSERT INTO my_table (fullName,emailaddress) VALUES ('$fullname','$emailaddress')"; 
    $data = mysql_query($query)or die(mysql_error()); 
    echo json_encode($data);
    } 

    if(isset($_POST['submit'])){ 
    NewUser();
    }

    ?>

該代碼運行良好，所有數據均正確顯示在數據庫中

Answer 1

因此，通過javascript阻止默認按鈕行為是有效的。 但是，我更喜歡僅將按鈕類型設置為“ button”。

<button type="button" id="submitButton">

這也將阻止表單提交； 這是一個偏好問題，我更喜歡它，因為它通過DOM來驅動行為，而不是為此類事情添加更多的jquery。

僅供參考，按鈕位於<form>時的默認類型為type =“ submit”。 https://stackoverflow.com/a/4667996/769971

Answer 2

（function（$，W，D）{var JQUERY4U = {};

JQUERY4U.UTIL =
{
    setupFormValidation: function()
    {
        //form validation rules
        $("#formid").validate({
            rules: {

                fielname1: {required : true},
                fielname2: {required : true},
                agree: "required"
            },
            messages: {
                fielname1: {required :"<p>Please enter your fielname1</p>"  },
                fielname2: {required :"<p>Please enter your fielname2</p>"  },
                agree: "Please accept our policy"
            }               
        });
    }       
}

//when the dom has loaded setup form validation rules
$(D).ready(function($) {
    JQUERY4U.UTIL.setupFormValidation();

});

}）（jQuery，window，document）;

Answer 3

嘗試：

$('#submitButton').click(function() {  
    $("#myForm").validate({
       debug: true,
       rules: {
            name: {
                required: true
            },
            user_mail: {
                required: true
            }
       },
       messages:{
           //messages     
       },
       submitHandler: function (form) {
            $.ajax({  
              type: 'POST',
              url: $(this).attr('action'),
              data: $(this).serialize(),
              dataType : 'json',
              success(function(data) {
                if (data){
                    alert("success");
                    $(this)[0].reset();
                }
              })
            });
            return false;
       }
  });
}

並從這個問題檢查演示

Answer 4

嘗試將event.preventDefault()粘貼在點擊處理程序中：

$('#submitButton').click(function(event) {
    event.preventDefault();  

Answer 5

這就是submitHandler的使用方式。 閱讀有助於您更好地了解該插件的文檔總是很有益的。

SubmitHandler（默認值：本機表單提交）類型：Function（）用於在表單有效時處理實際提交的回調。 獲取表單作為唯一參數。 替換默認的提交。

submitHandler: function(form) {
    var $form = $(form);
    $.ajax({
        type: 'POST',
        url: $form.attr('action'),
        data: $form.serialize(),
        dataType : 'json',
        success(function(data) {
            if (data) {
                alert("success");
                $form[0].reset();
            }
        });
    });
    return false; // Not sure if you needed this.
});