jquery - jQuery：如何在 ajaxForm 函数中包含验证？

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()用于在 DOM ready 上初始化插件，因此将其拉到其他函数之外。

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

• 使用插件的回调beforeSubmit函数，使用ajaxFormValidate 插件的.valid()方法以编程方式检查表单的有效性。

您无需担心创建任何新的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*/})
  }

})