不使用 <form> 标签的 jQuery UI 对话框验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/489722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Dialog validation without using <form> tags
提问by Josh
http://bassistance.de/jquery-plugins/jquery-plugin-validation/looks to be the best jquery validation plugin out there. I can't seem to get it working in the jQuery UI dialog though.
http://bassistance.de/jquery-plugins/jquery-plugin-validation/看起来是最好的 jquery 验证插件。不过，我似乎无法在 jQuery UI 对话框中使用它。
This code works outside of the dialog DIV:
此代码在对话框 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>
This works great. When i move the form into my dialog div, open dialog, and click the link it returns true, no bueno.
这很好用。当我将表单移动到我的对话框 div 中时，打开对话框，然后单击它返回 true 的链接，没有 bueno。
Is there any way to use this killer jquery validation plugin without having to use the <form>tag? Or is there an even better way of doing this successfully?
有没有什么方法可以使用这个杀手级的 jquery 验证插件而不必使用<form>标签？或者有没有更好的方法来成功地做到这一点？
回答by Nick Craver
In case someone else comes across this, the jQuery-UI dialog does not append to the form, it appends just before </body>, so the elements to validate are outside the <form></form>section:
万一其他人遇到这种情况，jQuery-UI 对话框不会附加到表单，而是附加在 之前</body>，因此要验证的元素在该<form></form>部分之外：
To resolve this, just direct the dialog to move itself inside the form when you create it, like this:
要解决此问题，只需在创建对话框时指示对话框将其自身移动到表单内即可，如下所示：
$("#mydiv").dialog("open").parent().appendTo(jQuery("form:first"));
回答by Allan Rwakatungu
You can use the valitidy jquery plugin
您可以使用 有效的 jquery 插件
The javascript
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");
}
}
});
})
回答by iZ.
Try giving your form an id like "myform".
尝试给你的表单一个像“myform”这样的 id。
Then try adding this call to the onclick event of your clicktest anchor :
然后尝试将此调用添加到 clicktest 锚点的 onclick 事件：
onclick='return($("#myform").validate().form());'
onclick='return($("#myform").validate().form());'
instead of doing the validation in the document.ready.
而不是在 document.ready 中进行验证。
回答by Garry English
Nick Craver solution worked for me, however it doesn't fully work for IE7.
Nick Craver 解决方案对我有用，但它并不完全适用于 IE7。
There is a bug in IE7 where it doesn't respect z-index for nested elements; therefore, if you move the dialog's parent into the form, the overlay will be over the dialog, preventing the user from interacting with the dialog. A fix for IE7 is to set the overlay's z-index to -1, then clone the overlay element and add it to the form just like you did for the dialog. Then in the close event of the dialog, remove the cloned overlay. IE7 Z-Index Layering Issues
IE7 中有一个错误，它不尊重嵌套元素的 z-index；因此，如果您将对话框的父级移动到表单中，覆盖层将覆盖在对话框上，从而阻止用户与对话框进行交互。IE7 的修复方法是将叠加层的 z-index 设置为 -1，然后克隆叠加层元素并将其添加到表单中，就像您在对话框中所做的一样。然后在对话框的关闭事件中，删除克隆的覆盖。 IE7 Z-Index 分层问题
Depending on your website layout, you might be able to just move the overlay and no need to clone it. I had to clone it, as my website layout has left and right margins, and I needed the overlay to cover the entire area. Below is an example of what I did:
根据您的网站布局，您可能只需移动覆盖层而无需克隆它。我不得不克隆它，因为我的网站布局有左右边距，我需要覆盖覆盖整个区域。下面是我所做的一个例子：
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');
}
Thanks, Garry
谢谢，加里
回答by pleshy
This may or may NOT be relevant however this was my problem and solution:
这可能相关，也可能不相关，但这是我的问题和解决方案：
I had the exact same issue, when I opened the dialog my "form" tag got replaced with a "div", tag.
我遇到了完全相同的问题，当我打开对话框时，我的“表单”标签被替换为“div”标签。
This was because I placed the dialog in an already opened form element, (obviously you can't have a form within a form)
这是因为我把对话框放在一个已经打开的表单元素中，（显然你不能在一个表单中有一个表单）
Dont do what I did :)
不要做我所做的:)
<form>
<form>
</form>
</form>
回答by prashantchalise
I have recently created a plugin for HTML Form validation. You can try it yourself.Prashant-UI-Validator
我最近创建了一个用于 HTML 表单验证的插件。你可以自己试试。Prashant-UI-验证器
Build using Jquery, supports Bootstrap and you can configure it in your way. It supports different data types like INT, STRING, NUMERIC, MAX[Num], MIN[Num],EMAIL and most importantly your custom javascript validation code as well.
使用 Jquery 构建，支持 Bootstrap，您可以按照自己的方式进行配置。它支持不同的数据类型，如 INT、STRING、NUMERIC、MAX[Num]、MIN[Num]、EMAIL，最重要的是还支持您的自定义 javascript 验证代码。
Hope it helps,
希望能帮助到你，
回答by Diana Eneida
I used this an it works in IE8, on an asp.net application using jQuery 1.11.2 and jQueryValidate 1.13.1:
我在 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
})
回答by Josh
I've decided to go with this jQuery validation pluginand write my own plugin around the existing code.
我决定使用这个 jQuery 验证插件并围绕现有代码编写我自己的插件。
回答by Jared
Have you tried wrapping the form around your div instead (according to the W3C spec form tags are not allowed to be inside divs.)
您是否尝试将表单包装在 div 周围（根据 W3C 规范，表单标签不允许在 div 内。）
Without re-writing the plugin I do not see an easy why of doing this without a form element.
如果不重新编写插件，我不明白为什么没有表单元素就这样做。
回答by mdrg
I know this question is old, but I came across this problem too, so I'm posting my solution.
我知道这个问题很老，但我也遇到了这个问题，所以我发布了我的解决方案。
If you want to keep jQuery validation plugin (which seems the best choice) and don't want to move the dialog around like Nick Craver suggested, you can simply add this to the <form>tag:
如果你想保留 jQuery 验证插件（这似乎是最好的选择）并且不想像 Nick Craver 建议的那样移动对话框，你可以简单地将它添加到<form>标签中：
onsubmit="return false;"
This will prevent the form from ever being submitted. If you need to submit it in some special situations, change this return value when needed.
这将阻止表单被提交。如果您在某些特殊情况下需要提交，请在需要时更改此返回值。
