Question

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>标签？或者是否有更好的成功方法？

Answer 1

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

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

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

Answer 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");       
            }
        }
   });
})

Answer 3

尝试为您的表单添加“myform”等ID。

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

的onclick = '返回（$（ “＃myForm的”）来验证（）形式（）。）;'

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

Answer 4

Nick Craver解决方案对我有用，但它对IE7不起作用。

IE7中存在一个错误，它不支持嵌套元素的z-index;因此，如果将对话框的父对象移动到表单中，则叠加层将位于对话框上，从而阻止用户与对话框进行交互。 IE7的一个修复是将overlay的z-index设置为-1，然后克隆overlay元素并将其添加到表单中，就像对对话框一样。然后在对话框的关闭事件中，删除克隆的叠加层。 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');
}

谢谢，加里

Answer 5

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

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

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

不要做我做的事情：）

<form>
    <form>

    </form>
</form>

Answer 6

您是否尝试过在div周围包装表单（根据W3C规范表单标签不允许在div中。）

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

Answer 7

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

Answer 8

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

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

onsubmit="return false;"

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

Answer 9

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

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

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

Answer 10

我最近为HTML表单验证创建了一个插件。你可以亲自试试。Prashant-UI-Validator

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

希望它有所帮助，

Answer 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
    })

jQuery UI对话验证，不使用<form>标签</form>

11 个答案: