jQuery:如何在 ajaxForm 函数中包含验证？

Question

这个问题已经有答案了:

.ajaxform not working inside the validation submitHandler? (1 个回答)

已关闭 10 年前。

This question已被询问，但答案尚未得到证实。我尝试过，但没有成功。所以我想再次问同样的问题(这合适吗？如果不合适，请告诉我该怎么做)。

我有一个表单需要验证，然后使用ajaxForm提交(该表单包含图像和文件数据，因此使用.serialize()提交不起作用)。详情如下:

HTML:

<form id="myForm" action="..." method="post" enctype="multipart/form-data">
  ...
  <input type="file" name="image" /><br />
  <input type="file" name="file" /><br />
  ...
</form>

jQuery:

$(document).ready(function() {

  $("#myForm").ajaxForm ({

    beforeSubmit: function() {
      $("#myForm").validate({
        onkeyup:false,
        rules: {
          ...
        },
        messages: {
          ...
        },
      });
    },

    success: function(returnData) {
      $('#content').html(returnData);
    }

  });

});

ajaxForm部分还可以。但表单只是简单提交而没有验证。

Answer 1

.validate() is used for initializing the plugin on DOM ready ，因此将其拉到其他函数之外。

初始化 DOM 中的两个插件，然后利用任何适当的内置回调函数...

• 使用beforeSubmit callback function of the ajaxForm plugin使用 Validate plugin's .valid() method 以编程方式检查表单的有效性.

您无需担心创建任何新的 submit 处理程序或 click 处理程序函数，因为这两个插件都已捕获 submit自动事件。

工作演示:http://jsfiddle.net/MF26D/

将您的代码重新排列为类似这样的内容:

$(document).ready(function () {

    $("#myForm").validate({ // initialize the plugin
        // any other options,
        onkeyup: false,
        rules: {
            //...
        },
        messages: {
            //...
        }
    });

    $("#myForm").ajaxForm({ // initialize the plugin
        // any other options,
        beforeSubmit: function () {
            return $("#myForm").valid(); // TRUE when form is valid, FALSE will cancel submit
        },
        success: function (returnData) {
            $('#content').html(returnData);
        }
    });

});