jQuery：如何在 ajaxForm 函数中包含验证？ [复制]

Question

已询问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);
        }
    });

});

Answer 2

试试这个

   $(document).ready(function() {

      $("#myForm").ajaxForm ({

        beforeSubmit: function() {
           if (!$("#myform").valid())
                    return;
        },

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

      });

    });

Answer 3

可以在提交处理程序中调用表单插件：

$("#myForm").submit(function(e){
  e.preventaDefault();

   var isValid=/* run your validation code that determines true or false*/

   if( isValid){
     $(this).ajaxForm({/* plugin options*/})
  }

})