带有表单validation插件的jQuery UI对话框

我目前正在为我的表单使用bassistancevalidation插件 。 我正在使用弹出模式对话框来存放需要validation的表单，但由于某种原因，它不是在调用我的表单…我的所有ID和引用都在工作，我仍然没有成功。

也许有人可以为我揭开光明。 这是我的Javascript代码。

$("#addEventDialog").dialog("open"); $("#addEventDialog").dialog({ title: 'Add Event', modal: true, buttons: { "Save": function() { $("#interestForm").validate({ submitHandler: function(form) { $("#calendarWidget2").ajaxSubmit({ target: "#calendarResponse", dataType: 'json', beforeSubmit: function () { $('input[type=submit]').attr("disabled", true); $("#calendarResponse").show('slow'); }, success: function(response, event) { if(response.status == true) { $('input[type=submit]').attr("disabled", false); $("#calendarResponse").delay(5000).fadeOut('slow'); //If the widget says it's okay to refresh, refresh otherwise, consider it done if(response.refreshEvents == '1') { $("#calendar").fullCalendar("refetchEvents"); } // Close the dialog box when it has saved successfully $("#addEventDialog").dialog("destroy"); // Update the page with the reponse from the server $("#calendarResponse").append("Successfully Added: "+ response.title +"
"); } else { $("#calendarWidget2").validate(); $("#calendarResponse").append("ERROR: "+ response.status +"
"); } }, error: function() { alert("Oops... Looks like we're having some difficulties."); } }); } }); }, "Cancel": function() { $(this).dialog("close"); } } }); 

Answer 1

我通过3个步骤解决了类似的问题：

1. 将validation器附加到表单：

    $('#your-form-id').validate(); 

2. 单击模态表单的“保存”按钮后，提交表单（将触发validation程序）：

    buttons: { "Save": function() { $('#your-form-id').submit(); }, 

3. 将提交逻辑移动到validation器submitHandler：

    $('#your-form-id').validate({ submitHandler: function(form) { // do stuff } }); 

Answer 2

validation器validate函数只是设置validation，它不会触发它。 在提交表单或写入字段时自动完成触发。尝试将validation代码添加到open事件：

 $("#addEventDialog").dialog("open"); $("#addEventDialog").dialog({ open: function() { $("#interestForm").validate({ ... }); }, ... 

Answer 3

我知道这个问题很老了。 但是当我在寻找这个特殊问题时，这个问题就出现了。 所以我认为这可能有助于其他人。 终于成功实现了这一目标。

请参阅http://jsfiddle.net/536fm/6/

Answer 4

尝试这样的事情。 把你的表单validation东西放在对话框脚本之外，或者我猜开放回调也可以。

  buttons : { "Cancel" : function() { $(this).dialog('close'); }, "Submit" : function() { var isValid = $("#yourForm").valid(); if(isValid) { var formData = $("#yourForm")serialize(); // pass formData to an ajax call to submit form. } return false; } }, 

Answer 5

我使用jQuery Dialog插件（ http://jqueryui.com/dialog/ ）和jQuery Validator插件（ http://jqueryvalidation.org/ ）有同样的问题。 问题是jQuery-UI对话框没有附加到表单，它在之前附加，因此要validation的元素在

部分之外。

为了解决这个问题，我在Dialog初始化中添加了“open”属性。 在这个属性中，我添加了一个函数，它将我的Dialog div元素包装在一个表单元素中，然后初始化validation器。

另外，我在Dialog初始化时添加“close”属性。 在这个属性中，我添加了一个函数，它打开我打开事件包裹的表单并重置validation器。

一个简单的例子，

以上javascript的一些html，

 
 
 Create a thematic section for a conference type. 
 
 
 Conference Type: 
  Type-1 Type-2  
 
 
 Title: