asp.net – jQuery UI对话验证

发布时间：2020-12-16 04:34:26 所属栏目：asp.Net 来源：网络整理

导读：单击“保存”时,我无法使用 Jquery Validate验证jQuery UI对话框. 这是我创建Jquery对话框的代码.它从目标href URL加载对话框： $(document).ready(dialogForms);function dialogForms() { $('a.dialog-form').click(function() { var a = $(this); $.get(a.

单击“保存”时,我无法使用 Jquery Validate验证jQuery UI对话框.

这是我创建Jquery对话框的代码.它从目标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,但它似乎不调用validate方法,该方法位于调用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"));
                }
            });

}

问题是在commitFormWithAjax函数中的beforeSend,$(“#event_form”).validate或者submitHandler：function(form)的位置吗？任何帮助将不胜感激.

解决方法

初始化jQueryUI对话框时,它会修改DOM,整个对话框从页面中的位置取出并插入< / body>之前.标签.你可以用Firebug看到这个.这会导致Validate出现问题,因为现在表单为空.要解决此问题,请在对话框的open事件中将其附加到表单.这听起来很古怪,但相信我,它的工作:)

dialog.dialog({
    title: a.attr('title') ? a.attr('title') : '',buttons: {
      'Save': function() {submitFormWithAjax($(this).find('form'));},'Cancel': function() {$(this).dialog('close');}
    },open: function(){
        $(this).parent().appendTo($('#event_form'));
    },width: 'auto'
  });

编辑：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!