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 type="button" id="submitButton">

这也会阻止表单提交;这是一个偏好的问题，我更喜欢它，因为它通过DOM驱动行为，而不是为这样的东西添加更多的jquery。

仅供参考，位于<form>时按钮的默认类型为type =“submit”。 https://stackoverflow.com/a/4667996/769971

Answer 2

（函数（$，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;
       }
  });
}

并检查demo

中的this question

Answer 4

尝试在点击处理程序中粘贴C：

event.preventDefault()

Answer 5

这就是使用submitHandler的方式。阅读docs可以帮助您更好地理解插件，这总是很好。

submitHandler（默认：本机表单提交）类型：功能（）当表单有效时，回调处理实际提交。获取表单作为唯一参数。替换默认提交。

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

Jquery中的Ajax表单提交submitHandler不起作用

5 个答案: