it-swarm.com.ru

проверка диалога пользовательского интерфейса jQuery без использования тегов <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, но не bueno.

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

32
Josh

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

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

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

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

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

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

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

вместо проверки в документе .ready.

1
iZ.

Решение Ника Крэйвера сработало для меня, однако оно не полностью работает для 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

1
Garry English

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

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

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

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

<form>
    <form>

    </form>
</form>
1
pleshy

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

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

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

0
Jared

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

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

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

0
prashantchalise

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

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

onsubmit="return false;"

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

0
mdrg

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

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

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

0
user406905

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

0
Josh