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

Question

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ выглядит лучшим плагином для проверки jquery. Я не могу заставить его работать в диалоговом окне пользовательского интерфейса jQuery.

Этот код работает вне диалогового окна 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, но не bueno.

Есть ли способ использовать этот плагин проверки jquery, не используя тег <form>? Или есть еще лучший способ сделать это успешно?

Answer 1

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

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

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

Answer 2

Вы можете использовать плагин 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");       
            }
        }
   });
})

Answer 3

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

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

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

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

<form>
    <form>

    </form>
</form>

Answer 4

Решение Nick Craver для меня сработало, однако оно не полностью работает для IE7.

В IE7 есть ошибка, которая не учитывает z-индекс для вложенных элементов; поэтому, если вы переместите родителя диалога в форму, наложение будет поверх диалога, не позволяя пользователю взаимодействовать с диалогом. Исправление для IE7 состоит в том, чтобы установить z-index оверлея равным -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

Answer 5

Попробуйте указать для своей формы идентификатор типа "myform".

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

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

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

Answer 6

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

Answer 7

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

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

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

Answer 8

см. Этот патч для популярного jQuery.validationEngine, чтобы разрешить использование тегов неформальной формы в качестве цели проверки.

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

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

Answer 9

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

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

onsubmit="return false;"

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

Answer 10

Я решил пойти с этим плагином проверки jQuery и написать свой собственный плагин для существующего кода.