jQuery用户界面对话框+验证 [英] jQuery UI Dialog + Validate

问题描述

我有在确认后，点击保存使用jQuery验证一个jQuery UI的对话框麻烦。

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

下面是我的code创建jQuery的对话框。它加载该对话框的目标A HREF网址：

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

在 beforeSend 被调用，但它似乎并没有叫验证的方法，这是位于父页面，从该对话框被调用。

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

}

与 beforeSend 在 submitFormWithAjax功能问题， $的位置（ #event_form）或 submitHandler验证：函数（表格）之内呢？任何帮助将大大AP preciated。

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.

推荐答案

在初始化jQueryUI的对话框，它修改DOM，取出它的整个对话是在页面的位置和<$ C $前右插C>＆LT; /身体GT; 标记。你可以看到这与萤火虫。这将导致验证的一个问题，因为现在的形式是空的。为了解决这个问题，在对话框的公开活动，其追加的形式。这听起来很古怪，但请相信我，它的工作原理：）

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

编辑：

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

这篇关于jQuery用户界面对话框+验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！