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

Posted 2023-05-07

【中文标题】使用 jQuery 验证验证和访问多个页面上的表单

【英文标题】：Validating and accessing multiple on-page forms with jQuery validation

【发布时间】：2021-10-13 12:28:40

【问题描述】：

我在一个页面上有多个动态生成的表单（用于上传文件）需要验证（尽管一次提交一个表单）： 格式是这样的（其中表单的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.
        
    );
 );

【问题讨论】：

它不起作用，因为插件不是由<button> 触发的，除非您使用type="submit" 属性。因此，尝试使用submitHandler 将按钮更改为提交是永远不会发生的。除非您首先使用type="submit" button 或input，否则它不会触发submitHandler 函数。

@Sparky - 当然是type=submit 按钮，这只是简化的代码。为了清楚起见，添加了。

“我也不需要验证所有表单 - 显然只需要验证提交的表单。下面的每个循环都会发生这种情况吗？” - 当然不是. .validate() 方法只是每个表单的初始化设置。

【参考方案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()，因此您实际上可以看到该按钮已被更改和禁用。