表单验证成功后显示 Fancybox

Posted 2023-05-09

【中文标题】表单验证成功后显示 Fancybox

【英文标题】：Show Fancybox after form validation success

【发布时间】：2011-02-18 19:46:43

【问题描述】：

我正在使用 jQuery+asp.net webforms，我也在使用 jQuery Validation 插件和 Fancybox 插件。当我单独使用插件时，我的代码工作正常。我的网络表单用于用户注册。

我使用验证插件在提交到服务器之前验证我的表单，当用户单击 asp.net 图像按钮（呈现为 input type="image" html 标记，ID= “btnSave”）。它已经按预期工作了。

fancybox 插件用于显示在另一个网络表单上动态生成的 pdf 文档。当用户单击锚点（“a”元素，ID="btnShowFancybox"）时，它会起作用。

我想在用户单击按钮 btnShowFancybox 时使用验证插件验证表单，如果验证成功，则显示 fancybox 以显示 pdf 文档。如果验证失败，我想向用户显示一条消息（警报）。我无法实现此功能。

这是我已经编码的：

头：

   <script  type="text/javascript">
      jQuery(document).ready(function() 
         jQuery("#aspnetForm").validate(
            //commented for simplicity
         );
      );
   </script>
</head>

表格：

<asp:ImageButton ID="btnSave" runat="server" ImageUrl="~/content/img/save.png" 
   OnClick="btnSave_Click" 
   OnClientClick="return jQuery('#aspnetForm').validate().form();" />

<a id="btnShowFancybox" class="iframe" href="generatePDF.aspx">
   <img src="content/img/showPDF.png" />
</a>

我需要实现表单的验证，用户点击btnShowFancybox后，如果验证失败不显示fancybox。我试过这个：

//changed href attribute of btnShowFancybox to "#", and inserted this code 
//after: jQuery(document).ready(function() 
//and before: jQuery("#aspnetForm").validate(
//what I'm trying to do here is to set the proper href only if form is valid, 
//then to call my fancybox to show pdf to the user, because the call to .fancybox didn't work I tried trigger the click event directly. and.. didn't work.
jQuery("#btnShowFancybox").click(function (e) 
            var validForm = jQuery('#aspnetForm').validate().form();
            alert(validForm);
            if(validForm) 
                jQuery("#btnShowFancybox").attr("href", "generatePDF.aspx");
                jQuery("#btnShowFancybox").fancybox(
                    'frameWidth' : 1000, 
                    'frameHeight': 700, 
                    'overlayShow': true, 
                    'hideOnContentClick': false
                );
                jQuery("#btnShowFancybox").fancybox().trigger('click');
            
            else 
                alert("form is not valid");
                jQuery("#btnShowFancybox").attr("href", "#");
            
        );

我也尝试创建一个JS函数并设置btnShowFancybox的onclick属性来调用这个函数。该函数验证表单，如果成功尝试 jQuery("#btnShowFancybox").fancybox(...，但它也没有工作。只是为了澄清，btnSave 不应该显示 fancybox，只有 btnShowFancybox 应该。

需要帮助...

【参考方案1】：

this question 有很多答案可以为您提供我认为需要的答案。

我通过在提交控件的“onclientclick”属性中添加一个额外的功能并手动触发 Web 表单验证功能解决了这个问题。

提交按钮的示例如下：

<asp:button id="btnSearch" runat="server" text="Search" validationgroup="SearchForm" onclientclick="javascript: TriggerValiation();" causesvalidation="true" onclick="btnSearch_OnClick" />

我的触发器验证函数如下所示：

function TriggerValiation() 

    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("<%= btnSearch.ClientID %>", "", true, "SearchForm", "", false, false));
    if (Page_IsValid) 
    
        $.fancybox
        (
            'titleShow': false,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'showCloseButton': false,
            'content': 'Searching...'
        );
    

我希望这会有所帮助。 丹。

【参考方案2】：

谢谢你，Danny，我最终使用了 jQuery UI Dialog，当我有机会审查你的建议时。为了记录，我解决了我的问题如下。

身体：

<div id="printDialog" title="Printed record">
    <div id="iframeContainer" style="width: 100%; height: 95%;">
    </div>
</div>

打印按钮背后的代码：

string js= @"
jQuery(function() 
    jQuery(""#iframeContainer"").html(""<iframe src='Print.aspx' width='100%' height='100%'></iframe>"");
    var dlg = jQuery('#printDialog').dialog( show: 'fold', hide: 'blind', width: '85%', height: 450, minHeight: 400, minwidth: 700, modal: true, autoOpen: false, zIndex: 9998 );
    dlg.parent().appendTo(jQuery('form:first'));
    jQuery('#printDialog').dialog('open');
);
";
ScriptManager.RegisterStartupScript(this, typeof(Page), "showDialog", js, true);