验证提交表单 ajax post

Question

使用以下代码，我使用下面的表单将图像上传到我的服务器

<form id="form" method="POST">
    <input name="image" type="file" />
    <br/>
    <input type="submit" />
</form>

并使用以下 .js 代码

$("#form").submit(function(e) {
var formData = new FormData($(this)[0]);
$.ajax({
            url: "uploadimage.php",
            type: "POST",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false
        });
         return false
    });

但我需要在您提交表单之前制定规则，因此我需要使用验证。

示例：

$("#form").validate({
submitHandler: function(form) {
$("#form").submit(function(e) {
var formData = new FormData($(this)[0]);
$.ajax({
            url: "uploadimage.php",
            type: "POST",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false
        });
         return false
    });
    },rules: {
        image: "required"
              },
            messages: {
                image: "image is required"
                      }
 });

但此代码不起作用

Answer 1

"but this code does not work"

那是因为您在插件的 submitHandler...

中放置了一个 .submit() 处理程序

submitHandler: function(form) {
    $("#form").submit(function(e) { ....

插件的 submitHandler 已经正确处理了默认的 submit 事件，仅在表单有效时触发按钮点击。

通过将另一个 .submit() 处理程序放入其中，它永远不会触发，因为表单的唯一提交事件已经发生。

删除额外的 .submit() 处理程序

submitHandler: function (form) {
    $.ajax({
        // your options
    });
    return false;
},

验证演示：http://jsfiddle.net/8tebdxn4/

此外，如果您想上传文件，您需要在 <form> 标签上使用正确的 enctype 属性...

<form id="form" method="POST" enctype="multipart/form-data">

验证提交表单 ajax post

Make a validation for a submit form ajax post

javascript

forms

ajax

jquery

jquery-validate