validação de jQuery UI diálogo sem usar tags

Question

http://bassistance.de/jquery-plugins/jquery-plugin-validation / parece ser a melhor jQuery validação plug-in lá fora. Eu não consigo fazê-lo funcionar no diálogo jQuery UI embora.

Esse código funciona fora do DIV de diálogo:

<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>

Isso funciona muito bem. Quando eu mover o formulário na minha div de diálogo, diálogo aberto, e clique no link que retorna verdadeiro, não bueno.

Existe alguma maneira de usar este assassino jQuery validação plugin sem ter que usar a tag <form>? Ou há uma maneira ainda melhor de fazer isso com sucesso?

Answer 1

Em caso de alguém se depara com isso, o diálogo jQuery-UI não anexa ao formulário, ele acrescenta pouco antes </body>, de modo que os elementos para validar estão fora da seção <form></form>:

Para resolver isso, basta dirigir o diálogo para mover-se dentro do formulário ao criá-la, como este:

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

Answer 2

Você pode usar o valitidy plugin jQuery

O 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

Tente dar seu formulário de um id como "myform".

Em seguida, tente adicionar esta chamada para o evento onclick de sua âncora clicktest:

onclick = 'return ($ ( "# myform") validate () forma ()..);'

em vez de fazer a validação no document.ready.

Answer 4

solução Nick Craver trabalhou para mim, no entanto, não totalmente trabalho para IE7.

Existe um erro no IE7 onde não respeita índice z para elementos encaixados; portanto, se você se mover pai do diálogo para a forma, a sobreposição estará sobre o diálogo, impedindo que o usuário interagir com o diálogo. Uma correção para o IE7 é definir z-index da sobreposição para -1, então clonar o elemento de sobreposição e adicioná-lo para a forma como você fez para o diálogo. Em seguida, no próximo evento da caixa de diálogo, remover a sobreposição clonado. IE7 Z-Index problemas de camadas

Dependendo do seu layout do site, você pode ser capaz de simplesmente mover a sobreposição e sem necessidade de cloná-lo. Eu tive que cloná-lo, como o meu layout do site tem margens esquerda e direita, e eu precisava de sobreposição para cobrir toda a área. Abaixo está um exemplo do que eu fiz:

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');
}

Obrigado, Garry

Answer 5

Esta pode ou não ser relevantes no entanto isso foi o meu problema e solução:

Eu tinha exatamente o mesmo problema, quando eu abri a janela de minha tag "forma" foi substituído por um "div", tag.

Isso foi porque eu coloquei a caixa de diálogo em um elemento de formulário já aberto, (obviamente você não pode ter uma forma dentro de um formulário)

Não faça o que eu fiz:)

<form>
    <form>

    </form>
</form>

Answer 6

Você tentou embrulhar a forma em torno de sua div em vez (de acordo com o W3C especificação marcas de formulário não estão autorizados a estar dentro de divs.)

Sem re-escrever o plugin não vejo um fácil porque de fazer isso sem um elemento de formulário.

Answer 7

Eu decidi ir com este jQuery validação plugin de e escrever meu próprio em torno do plugin o código existente.

Answer 8

Eu sei que esta questão é antiga, mas me deparei com este problema também, então eu estou postando a minha solução.

Se você quiser manter jQuery validação plug-in (que parece ser a melhor escolha) e não deseja mover o diálogo em torno de como Nick Craver sugerido, você pode simplesmente adicionar isso à tag <form>:

onsubmit="return false;"

Isso vai impedir que o formulário já está sendo enviado. Se você precisa enviá-lo em algumas situações especiais, altere este valor de retorno quando necessário.

Answer 9

ver este patch para o jQuery.validationEngine popular para permitir que não-marcas de formulário como alvo validação.

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

Se você encontrar este vale a pena, deixe um comentário ... a partir de agora o autor não vai puxar o patch.

Answer 10

Eu criei recentemente um plug-in para validação de formulário HTML. Você pode experimentar por si mesmo. Prashant-UI-Validador

construir usando Jquery, suporta Bootstrap e você pode configurá-lo em seu caminho. Ele suporta diferentes tipos de dados, como INT, STRING, NUMERIC, MAX [Num], MIN [Num], e-mail e, mais importante o seu costume o código de validação javascript também.

Hope isso ajuda,

Answer 11

Eu usei esse um que funciona no IE8, em um aplicativo asp.net usando jQuery 1.11.2 e 1.13.1 jQuery Validate:

$('#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
    })