Подтвердить что ты не робот

Проверка JQuery UI Dialog без использования тегов <form>

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>? Или есть еще лучший способ сделать это успешно?

4b9b3361

ОТВЕТЫ

Ответ 1

В случае, если кто-то сталкивается с этим, диалог jQuery-UI не добавляется к форме, он добавляется непосредственно перед </body>, поэтому элементы для проверки находятся вне раздела <form></form>:

Чтобы решить эту проблему, просто запустите диалог, чтобы переместить себя внутри формы при ее создании, например:

$("#mydiv").dialog("open").parent().appendTo(jQuery("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".

Затем попробуйте добавить этот вызов к событию onclick вашего якоря clicktest:

OnClick = "возвращение (. $(" # MyForm") проверки() формы().);

вместо выполнения проверки в документе document.ready.

Ответ 4

Решение 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

Ответ 5

Это может быть или не быть актуальным, однако это была моя проблема и решение:

У меня была такая же проблема, когда я открыл диалог, мой тег "form" был заменен тегом "div".

Это произошло потому, что я поместил диалог в уже открытый элемент формы (очевидно, вы не можете иметь форму внутри формы)

Не делайте то, что я сделал:)

<form>
    <form>

    </form>
</form>

Ответ 6

Попробовали ли вы обернуть форму вокруг своего div (в соответствии с тегами формы спецификации W3C не разрешается находиться внутри div.)

Не переписывая плагин, я не вижу, почему это делается без элемента формы.

Ответ 8

Я знаю, что этот вопрос старый, но я тоже столкнулся с этой проблемой, поэтому я отправляю свое решение.

Если вы хотите сохранить плагин проверки jQuery (который кажется лучшим выбором) и не хотите перемещать диалог, как предложил Nick Craver, вы можете просто добавить его в тег <form>:

onsubmit="return false;"

Это предотвратит отправку формы. Если вам необходимо отправить его в некоторых особых ситуациях, измените это возвращаемое значение, когда это необходимо.

Ответ 9

см. этот патч для популярного jQuery.validationEngine, чтобы теги неформы были ориентированы на проверку.

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

если вы находите это стоящим, оставьте комментарий... пока автор не потянет патч.

Ответ 10

Недавно я создал плагин для проверки HTML-формы. Вы можете попробовать сами. Prashant-UI-Validator

Построение с использованием JQuery, поддержка Bootstrap, и вы можете настроить его на своем пути. Он поддерживает различные типы данных, такие как INT, STRING, NUMERIC, MAX [Num], MIN [Num], EMAIL и, самое главное, ваш пользовательский код проверки JavaScript.

Надеюсь, что это поможет,

Ответ 11

Я использовал это, он работает в 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
    })