jquery - jQuery:如何在ajaxForm函数中包括验证？

This question already has an answer here:

.ajaxform not working inside the validation submitHandler?

（1个答案）


7年前关闭。




已询问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部分正常。但是，表单只是未经验证而提交。

最佳答案

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

});