加载时在 iframe 内容中添加客户端不显眼的验证规则

Posted 2023-05-09

【中文标题】加载时在 iframe 内容中添加客户端不显眼的验证规则

【英文标题】：Adding client side unobtrusive validation rules in iframe content on load

【发布时间】：2020-12-17 15:36:57

【问题描述】：

环境上下文：ASP.NET MVC 5 和 jquery 不显眼的验证

我们有一些用户定义的字段，一些用户需要，而其他用户不需要。 因此，基于当前用户的帐户，我正在尝试仅添加客户端验证规则，其行为类似于服务器端数据注释规则。但也许这是错误的方法？也许我应该在服务器端创建一个自定义数据注释验证规则，然后让客户端自己处理？

无论如何，这就是我所拥有的：

function validateWorkOrderFormOnLoad() 

    //Parses the new form for unobtrusive validation
    var $form = $('form');

    if (intAccountId === 1) 
        //MUST INITIALIZE THE VALIDATOR FIRST
        var validator = $form.validate();

        $("#WOHdr_Attribute3").rules("add", 
            required: true,
            messages: 
                required: attribute3 + " is Required."
            
        );

        $("#WOHdr_Attribute4").rules("add", 
            required: true,
            messages: 
                required: attribute4 + " is Required."
            
        );
    
    //$form.removeData('validator');
    //$form.removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse($form);
    var isValid = $form.valid();

在 iframe 内容（不是父级）的文档加载时调用：

$(function () 
    setTimeout(function () 
        validateWorkOrderFormOnLoad();
    , 2000);
     
);

这行得通。但正如你所看到的，我必须延迟，我不喜欢这样，而且闻起来有点老套。

我已尝试从 iframe 加载事件中调用此方法：

$iframe.load(function ()  validateWorkOrderFormOnLoad(); );

这来自于 iframe 内容页面中的脚本选项卡：

window.onload = function () 
   var $form = $("#frmWorkOrderHdr");
   parent.validateWorkOrderFormOnLoad($form);

在 iframe onload 事件上：

<iframe style="border:0px;width:100%;height:100px;display:none;" onload="validateWorkOrderFormOnLoad(this)" src=""></iframe>

除非我延迟，否则这些方法都不起作用。我错过了什么？哪个事件应该调用这个方法来显示表单加载的错误？

【参考方案1】：

事实证明，我在加载时隐藏的表单上进行了测试，默认情况下，验证不会验证隐藏的元素。所以我不得不通过将忽略列表设置为空来告诉它不要忽略隐藏元素：

$form.validate().settings.ignore

它与延迟一起工作的原因是，表单会在加载后和延迟触发事件之前的某个时间显示。