32

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>标签？或者有没有更好的方法来成功地做到这一点？

4

11 回答 11

33

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

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

$("#mydiv").dialog("open").parent().appendTo(jQuery("form:first"));
于 2010-01-26T19:48:38.820 回答
3

您可以使用 valitidy jquery 插件

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");       
            }
        }
   });
})
于 2009-10-14T17:23:01.310 回答
1

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

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

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

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

于 2009-01-28T22:52:50.397 回答
1

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

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

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

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');
}

谢谢，加里

于 2011-09-12T15:31:59.220 回答
1

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

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

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

不要做我所做的:)

<form>
    <form>

    </form>
</form>
于 2012-11-01T14:50:09.097 回答
0

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

如果不重新编写插件，我看不出没有表单元素的简单原因。

于 2009-01-28T22:45:12.547 回答
0

我决定使用这个 jQuery 验证插件并围绕现有代码编写我自己的插件。

于 2009-01-28T23:25:56.570 回答
0

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

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

onsubmit="return false;"

这将阻止表单被提交。如果在一些特殊情况下需要提交，在需要的时候改变这个返回值。

于 2010-10-25T17:35:55.377 回答
0

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

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

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

于 2011-07-14T19:50:25.730 回答
0

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

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

希望能帮助到你，

于 2014-07-02T08:59:27.043 回答
0

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

$('#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
    })
于 2015-01-28T03:23:36.170 回答