jQuery UI Dialog + Validate

Question

I'm having trouble in validating a jQuery UI dialog using Jquery Validate upon clicking Save.

Here's my code to create Jquery dialog. It loads the dialog from a target a href URL:

$(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;
}

The beforeSend is called, but it doesn't seem to call the validate method, which is located on the parent page from which Dialog is called.

        $(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"));
                }
            });

}

Is the problem with the beforeSend within submitFormWithAjax function, the location of $("#event_form").validate or the submitHandler: function(form) within it? Any help will be greatly appreciated.

Answer 1

When you initialize the jQueryUI dialog, it modifies the DOM, the hole dialog is taken out of it's location in the page and inserted right before the </body> tag. You can see this with Firebug. This causes a problem for Validate, because now the form is empty. To solve this, on the dialog's open event, append it to the form. It sounds really wacky, but trust me, it works :)

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

Edit:

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