Hộp thoại giao diện người dùng jQuery + Xác thực

Question

Tôi gặp sự cố khi xác thực hộp thoại Giao diện người dùng jQuery bằng cách sử dụng Jquery Validate khi nhấp vào Lưu.

Đây là mã của tôi để tạo hộp thoại Jquery. Nó tải hộp thoại từ một mục tiêu 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; 
} 

Các beforeSend được gọi, nhưng nó dường như không gọi phương thức validate, được đặt trên trang mẹ từ đó được gọi là Dialog.

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

} 

là vấn đề với beforeSend trong submitFormWithAjax function, vị trí của $("#event_form").validate hoặc submitHandler: function(form) bên trong nó? Chúng tôi rất trân trọng bất kỳ sự giúp đỡ nào.

Answer 1

Khi bạn khởi tạo hộp thoại jQueryUI, nó sửa đổi DOM, toàn bộ hộp thoại được lấy ra khỏi vị trí của nó trong trang và được chèn ngay trước thẻ </body>. Bạn có thể thấy điều này với Firebug. Điều này gây ra một vấn đề để xác nhận, bởi vì bây giờ biểu mẫu trống. Để giải quyết vấn đề này, trên sự kiện mở của hộp thoại, hãy thêm nó vào biểu mẫu. Nghe có vẻ thực sự lập dị, nhưng tôi tin tưởng, nó hoạt động :)

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> 

Answer 2

Took một cách tiếp cận hơi khác nhau này. Tôi cần thiết để tái sử dụng hình thức modal của tôi vì vậy tôi thêm một lần jquery "tạo ra" những phương thức:

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