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>? Или есть еще лучший способ сделать это успешно?
В случае, если кто-то сталкивается с этим, диалог jQuery-UI не добавляется к форме, он добавляется непосредственно перед </body>, поэтому элементы для проверки находятся вне раздела <form></form>:
Чтобы решить эту проблему, просто запустите диалог, чтобы переместить себя внутри формы при ее создании, например:
$("#mydiv").dialog("open").parent().appendTo(jQuery("form:first"));
Вы можете использовать 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");
}
}
});
})
Попробуйте указать свою форму как "myform".
Затем попробуйте добавить этот вызов к событию onclick вашего якоря clicktest:
OnClick = "возвращение (. $(" # MyForm") проверки() формы().);
вместо выполнения проверки в документе document.ready.
Решение Nick Craver работало для меня, однако оно не полностью работает для IE7.
В IE7 есть ошибка, где он не учитывает z-индекс для вложенных элементов; поэтому, если вы переместите родительский диалог в форму, наложение будет по диалогу, не позволяя пользователю взаимодействовать с диалогом. Исправление для IE7 заключается в том, чтобы установить оверлейный z-индекс в -1, затем клонировать элемент overlay и добавить его в форму так же, как вы сделали для диалога. Затем в закрытом диалоговом окне удалите клонированный оверлей. Проблемы с выравниванием Z-индекса IE7
В зависимости от вашего макета веб-сайта вы можете просто перемещать оверлей и не нужно клонировать его. Я должен был клонировать его, так как мой макет веб-сайта имеет левую и правую поля, и мне нужен оверлей для покрытия всей области. Ниже приведен пример того, что я сделал:
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');
}
Спасибо, Garry
Это может быть или не быть актуальным, однако это была моя проблема и решение:
У меня была такая же проблема, когда я открыл диалог, мой тег "form" был заменен тегом "div".
Это произошло потому, что я поместил диалог в уже открытый элемент формы (очевидно, вы не можете иметь форму внутри формы)
Не делайте то, что я сделал:)
<form>
<form>
</form>
</form>
Попробовали ли вы обернуть форму вокруг своего div (в соответствии с тегами формы спецификации W3C не разрешается находиться внутри div.)
Не переписывая плагин, я не вижу, почему это делается без элемента формы.
Я решил пойти с этот плагин проверки jQuery и написать собственный плагин вокруг существующего кода.
Я знаю, что этот вопрос старый, но я тоже столкнулся с этой проблемой, поэтому я отправляю свое решение.
Если вы хотите сохранить плагин проверки jQuery (который кажется лучшим выбором) и не хотите перемещать диалог, как предложил Nick Craver, вы можете просто добавить его в тег <form>:
onsubmit="return false;"
Это предотвратит отправку формы. Если вам необходимо отправить его в некоторых особых ситуациях, измените это возвращаемое значение, когда это необходимо.
см. этот патч для популярного jQuery.validationEngine, чтобы теги неформы были ориентированы на проверку.
https://github.com/posabsolute/jQuery-Validation-Engine/pull/101
если вы находите это стоящим, оставьте комментарий... пока автор не потянет патч.
Недавно я создал плагин для проверки HTML-формы. Вы можете попробовать сами. Prashant-UI-Validator
Построение с использованием JQuery, поддержка Bootstrap, и вы можете настроить его на своем пути. Он поддерживает различные типы данных, такие как INT, STRING, NUMERIC, MAX [Num], MIN [Num], EMAIL и, самое главное, ваш пользовательский код проверки JavaScript.
Надеюсь, что это поможет,
Я использовал это, он работает в IE8, в приложении asp.net, используя jQuery 1.11.2 и jQueryValidate 1.13.1:
$('#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
})