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.
});