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.

Can you tell that the .error class is being added to your elements when they're invalid? — David Fox
– David Fox, Commented Sep 30, 2010 at 1:38

BNL · Accepted Answer · 2012-05-10 14:46:58Z

7

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>

edited May 10, 2012 at 14:46

BNL

7,1214 gold badges30 silver badges32 bronze badges

answered Oct 5, 2010 at 7:45

Attila Szasz

3,0833 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

netwire Over a year ago

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?

Attila Szasz Over a year ago

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.

wtjones Over a year ago

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

wtjones Over a year ago

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

Axel Over a year ago

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

skrile · Accepted Answer · 2012-11-12 13:34:06Z

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

answered Nov 12, 2012 at 13:34

skrile

3884 silver badges10 bronze badges

1 Comment

wtjones Over a year ago

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.

Collectives™ on Stack Overflow

jQuery UI Dialog + Validate

2 Answers 2

5 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Linked

Related