不使用 <form> 标签的 jQuery UI 对话框验证

Posted 2023-05-09

【中文标题】不使用 <form> 标签的 jQuery UI 对话框验证

【英文标题】：jQuery UI Dialog validation without using <form> tags

【发布时间】：2010-10-04 03:13:10

【问题描述】：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 看起来是目前最好的 jquery 验证插件。不过，我似乎无法让它在 jQuery UI 对话框中工作。

此代码在对话框 DIV 之外工作：

<script type="text/javascript">
$(document).ready(function() 
     $("form").validate();
     $("a").bind("click", function()  alert($("form").valid()); );
);
</script>

<form method="get" action="">
   <p>
     Name
     <input id="name" name="name" class="required" minlength="2" />
   </p>
   <p>
     E-Mail
     <input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <a href="#" id="clickTest">Click</a>
</form>

这很好用。当我将表单移动到我的对话框 div 中时，打开对话框，然后单击它返回 true，no bueno 的链接。

有什么方法可以使用这个杀手级 jquery 验证插件而不必使用 <form> 标签？或者有没有更好的方法可以成功地做到这一点？

【参考方案1】：

如果其他人遇到这种情况，jQuery-UI 对话框不会附加到表单中，它会附加到 </body> 之前，因此要验证的元素在 <form></form> 部分之外：

要解决此问题，只需在创建对话框时指示对话框在表单内移动，如下所示：

$("#mydiv").dialog("open").parent().appendTo(jQuery("form:first"));

【讨论】：

这在 IE7 中并不完全有效。有关其他步骤，请参阅我的答案。

我想我在研究过程中多次遇到这个答案，然后才意识到它的含义。 devio.wordpress.com/2012/07/16/… 谢谢！

新对话框（jquery 1.10）有一个 appendTo 选项： $( ".selector" ).dialog( appendTo: "form:first" );

【参考方案2】：

您可以使用valitidy jquery plugin

JavaScript

function validateForm()  
    $.validity.start();   
    // Required:  
    $("#recipientFirstName").require();  
    var result = $.validity.end();  
    return result.valid;  


$(document).ready(function()  
    $('#dialog').dialog(
        autoOpen: false,   
        title: 'My title', 
        width: 600,  
        modal: true,  
        buttons:   
            "Ok": function()    
                if(validateForm()) 
                    saveOrder();
                    $(".validity-tooltip").css("display", "none"); 
                    $(this).dialog("close");  
                
            ,
            "Cancel": function() 
                // The following line was added to
                // hide the tool-tips programmatically:          
                $(".validity-tooltip").css("display", "none");
                $(this).dialog("close");       
            
        
   );
)

【参考方案3】：

试着给你的表单一个像“myform”这样的ID。

然后尝试将此调用添加到您的 clicktest 锚点的 onclick 事件中：

onclick='return($("#myform").validate().form());'

而不是在 document.ready 中进行验证。

【参考方案4】：

Nick Craver 解决方案对我有用，但它并不完全适用于 IE7。

IE7 中存在一个错误，它不尊重嵌套元素的 z-index；因此，如果您将对话框的父级移到表单中，则覆盖层将覆盖在对话框上，从而阻止用户与对话框进行交互。 IE7 的修复方法是将叠加层的 z-index 设置为 -1，然后克隆叠加层元素并将其添加到表单中，就像您为对话框所做的那样。然后在对话框的关闭事件中，删除克隆的覆盖。 IE7 Z-Index Layering Issues

根据您的网站布局，您可能只需要移动叠加层而无需克隆它。我不得不克隆它，因为我的网站布局有左右边距，我需要覆盖来覆盖整个区域。下面是我所做的一个例子：

var $dialog = $('#myDialog');
var $form = $dialog.parents('form:first');

$dialog.dialog(
    autoOpen: false,
    title: 'My Dialog',
    minWidth: 450,
    minHeight: 200,
    modal: true,
    position: ['center', 'center'],
    close: function () 
        // IE7 BUG: Needed to add an additional overload because of the z-index bug in IE7.
        $('.ui-widget-overlay-ie7fix:first').remove();
    ,
    buttons: dialogButtons
);

$form.prepend($dialog.parent());
$dialog.dialog('open');

if ($.browser.msie && $.browser.version.slice(0, 1) == "7") 
    var $overlay = $('body .ui-widget-overlay:first');
    $form.prepend($overlay.clone().addClass('ui-widget-overlay-ie7fix'));
    $overlay.css('z-index', '-1');

谢谢， 加里

【参考方案5】：

这可能相关也可能不相关，但这是我的问题和解决方案：

我遇到了完全相同的问题，当我打开对话框时，我的“form”标签被替换为“div”标签。

这是因为我将对话框放置在一个已经打开的表单元素中，（显然你不能在表单中拥有一个表单）

不要做我做过的事:)

<form>
    <form>

    </form>
</form>

【参考方案6】：

您是否尝试过将表单包裹在您的 div 周围（根据 W3C 规范，表单标签不允许在 div 内。）

如果不重新编写插件，我不明白为什么要在没有表单元素的情况下这样做。

【参考方案7】：

我决定使用this jQuery validation plugin 并围绕现有代码编写我自己的插件。

【参考方案8】：

我知道这个问题很老，但我也遇到过这个问题，所以我发布了我的解决方案。

如果您想保留 jQuery 验证插件（这似乎是最佳选择）并且不想像 Nick Craver 建议的那样移动对话框，您可以简单地将其添加到 <form> 标签：

onsubmit="return false;"

这将阻止表单被提交。如果在某些特殊情况下需要提交，请在需要时更改此返回值。

【参考方案9】：

查看流行的 jQuery.validationEngine 的此补丁，以允许非表单标签作为验证目标。

https://github.com/posabsolute/jQuery-Validation-Engine/pull/101

如果你觉得这值得，请发表评论...截至目前作者不会拉补丁。

【讨论】：

我在这个页面得到错误宽度：options is undefined [Break On This Error] options.isError = false;

【参考方案10】：

我最近创建了一个用于 html 表单验证的插件。你可以自己试试。Prashant-UI-Validator

使用 Jquery 构建，支持 Bootstrap，您可以按照自己的方式进行配置。它支持不同的数据类型，如 INT、STRING、NUMERIC、MAX[Num]、MIN[Num]、EMAIL，最重要的是还支持您的自定义 javascript 验证代码。

希望对你有帮助，

【参考方案11】：

我使用它，它在 IE8 中使用，在一个使用 jQuery 1.11.2 和 jQueryValidate 1.13.1 的 asp.net 应用程序上：

$('#lnz_NuevoLink').click(function () 
        $("#lnz_AgregarDiv").dialog("open").parent().appendTo(jQuery("#aspnetForm"));   //Add the dialog to the form     
        $("#lnz_AgregarDiv").parent().attr('style', 'z-index: 101');                //To avoid the modal
        $("#lnz_AgregarDiv").dialog("option", "position",  my: "center", at: "center", of: window ); //To center the dialog
    )