jQuery UI Diálogo + Validar

Question

Tengo problemas para validar un cuadro de diálogo de la interfaz de usuario jQuery usando Jquery Validate al hacer clic en Guardar.

Aquí está mi código para crear el diálogo de Jquery. Se carga el diálogo desde un objetivo de una URL href:

$(document).ready(dialogForms); 

function dialogForms() { 
    $('a.dialog-form').click(function() { 
    var a = $(this); 
    $.get(a.attr('href'),function(resp){ 
     var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html()); 
     $('body').append(dialog); 
     dialog.find(':submit').hide(); 
     dialog.find('#return').hide(); 
     dialog.dialog({ 
     title: a.attr('title') ? a.attr('title') : '', 
     modal: true, 
     buttons: { 
      'Save': function() {submitFormWithAjax($(this).find('form'));}, 
      'Cancel': function() {$(this).dialog('close');} 
     }, 
     close: function() {$(this).remove();}, 
     width: 'auto' 
     }); 
    }, 'html'); 
    return false; 
    }); 
} 

function submitFormWithAjax(form) { 
    form = $(form); 
    $.ajax({ 
     beforeSend: function(data) { 
      //alert("beforesend"); 
      form.validate(); 
     }, 
     url: form.attr('action'), 
     data: form.serialize(), 
     type: (form.attr('method')), 
     dataType: 'text', 
     error: function(data) { 
      alert(data); 
      $('#result').html(data); 
     }, 
     success: function(data) { 
      //alert("success"); 
      $('#result').html(data); 
      setTimeout("reloadPage()", 500); 
     } 
    }); 
    return false; 
} 

El beforeSend se llama, pero no parece que llamar al método validate, que se encuentra en la página principal de la que se llama diálogo.

 $(document).ready(function() { 
      $("#event_form").validate({ 
       rules: { 
        Name: { 
         required: true 
        }, 
        Category: { 
         required: true 
        } 
       }, 
       messages: { 
        Name: "Please enter an event name", 
        Category: "Please choose a category" 
       }, 
       submitHandler: function(form) { 
        alert("validated"); 
        //     $('#loading_1').show(); 
        //     $('#proceed_c').hide(); 
        //     $(form).ajaxSubmit(); 
        //     //form.submit(); 
       }, 
       errorPlacement: function(error, element) { 
        error.appendTo(element.next(".status")); 
       } 
      }); 

} 

es el problema con la beforeSend dentro submitFormWithAjax function, la ubicación de $("#event_form").validate o la submitHandler: function(form) dentro de ella? Cualquier ayuda será apreciada.

Answer 1

Cuando inicializa el cuadro de diálogo jQueryUI, modifica el DOM, el diálogo completo se saca de su ubicación en la página y se inserta justo antes de la etiqueta </body>. Puedes ver esto con Firebug. Esto causa un problema para Validar, porque ahora el formulario está vacío. Para solucionar esto, en el evento abierto del diálogo, agréguelo al formulario. Suena muy loco, pero confía en mí, funciona :)

dialog.dialog({ 
    title: a.attr('title') ? a.attr('title') : '', 
    modal: true, 
    buttons: { 
     'Save': function() {submitFormWithAjax($(this).find('form'));}, 
     'Cancel': function() {$(this).dialog('close');} 
    }, 
    close: function() {$(this).remove();}, 
    open: function(){ 
     $(this).parent().appendTo($('#event_form')); 
    }, 
    width: 'auto' 
    }); 

Editar:

<form id='event_form'> 
    <div id="dialog" title="DialogTitle"> 
    </div> 
</form> 

Answer 2

adoptó un enfoque ligeramente diferente a este. Necesitaba volver a utilizar mi formulario modal por lo añado una vez jQuery "crea" el modal:

$("#mdl_Subject").dialog({ 
    autoOpen: false, 
    show: "drop", 
    hide: "drop", 
    modal: true, 
    create: function() { 
     $(this).parent().appendTo($('#aspnetForm')); 
    } 
});