使用 jQuery 验证验证和访问多个页面表单

Question

我在一个页面上有多个动态生成的表单（用于上传文件）需要验证（尽管表单一次提交一个）：格式是这样的（其中表格id中的X是一个数字）：

<form class="uploader" method="post" action="?task=edit" 
id="sectionsX" name="sections" 
enctype="multipart/form-data">
   <button class=" btn btn-primary" type="submit">Submit</button>
</form>

现在，如果有效，想在提交时更改 button HTML。以下代码不起作用：

我也不需要验证所有表单 - 显然只需要提交的表单。下面的 each 循环会发生这种情况吗？

 $('.uploader').each(function () {
    $(this).validate({
        invalidHandler: function(event, validator) {
            alert('Please be sure to fill out all mandatory fields');
        },
        submitHandler: function(form) { // <- pass 'form' argument in
            $(this).find("button").html('Processing...').attr("disabled", "disabled");
            form.submit(); // <- use 'form' argument here.
        }
    });
 });

Answer 1

为了在 submitHandler 回调函数中使用 $(this)，您需要将其分配给一个变量。尝试 var myform = $(this)

$('.uploader').each(function() {
    var myform = $(this);
    myform.validate({
        invalidHandler: function(event, validator) {
            alert('Please be sure to fill out all mandatory fields');
        },
        submitHandler: function(form) { // <- pass 'form' argument in
            myform.find("button").html('Processing...').attr("disabled", "disabled");
            //form.submit(); // <- use 'form' argument here.
        }
    });
});

演示：jsfiddle.net/q4sy1vfe/

我注释掉了 form.submit() 这样您就可以实际看到该按钮已被更改和禁用。

使用 jQuery 验证验证和访问多个页面表单

Validating and accessing multiple on-page forms with jQuery validation

forms

jquery

jquery-validate