Question

已经问过{p> 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*/})
  }

})

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

3 个答案: