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.

Iodate

Can you tell that the .error class is being added to your elements when they're invalid? – Hyder

Answer 1

When you initialize the jQueryUI dialog, it modifies the DOM, the whole 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>

Striped

I tried this and it's not working. The dialog now doesn't show up. Just to clarify, the page calling the jquery dialog and holds function dialogForms() (calling page) doesn't contain any form element. The destination page contains a event_form and the jquery validation script. Are these the right locations for them? Is the appendTo still target event_form? – Iodate

I edited the answer to add the structure I use, the dialog is applied to the div and the validate to the form. The dialog is appended back into the form. All this, including the jquery code is in a separate file, and loaded into an emty div on my page on an onclick() event. – Striped

Modal mode is broken for me with this method because it puts the dialog behind the "shadow". jsfiddle.net/wtjones/ZWUq7/1 – China

Submitted edit to fix the modal issue as suggested via bugs.jqueryui.com/ticket/9095. Broken: jsfiddle.net/wtjones/ZWUq7/1 Fixed: jsfiddle.net/wtjones/ZWUq7/3 – China

Thank you @China this did the trick for me : appendTo: $('#form1') – Sonstrom

Answer 2

Took a slightly different approach to this. I needed to reuse my modal form so I append it once jquery "creates" the modal:

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

Erelong

Submitted same modal fix to use the appendTo option as suggested here: bugs.jqueryui.com/ticket/9095. I think only newer jquery ui versions (>= 1.10.2) are affected. – China