Jquery 对话框验证答案

【问题标题】：Jquery Dialog ValidationJquery 对话框验证
【发布时间】：2011-05-31 14:43:46
【问题描述】：

我试图弄清楚为什么我的错误消息没有显示在对话框中，以及为什么当我填写表格并单击“发送电子邮件”时对话框没有关闭。我确定这是我缺少的东西，但我没有看到它。

Cliffs：我单击主页上的一个链接（同一类，因为有多个链接），弹出一个对话框，询问姓名、电子邮件和密码。姓名和电子邮件是必需的，错误消息应显示在漂亮的 UI 警报框中。相反，错误消息显示在文本框下方，并且当正确填写表单字段时，对话框不会关闭。

我做错了什么？

<html>
  <a href="Class1" class="Roster">View Roster</a>
  <a href="Class2" class="Roster">View Roster</a>
  <a href="Class3" class="Roster">View Roster</a>
  <a href="Class4" class="Roster">View Roster</a>
 .
 .
</html>   

$("#RosterForm").validate({
    errorContainer: "#errorblock-div1, #errorblock-div2",
    errorLabelContainer: "#errorblock-div2 ul",
    wrapper: "li",
    rules: {
        FullName: { required: true },
        Email: { required: true }
    },
    messages: {
        FullName: { required: "Please enter your name." },
        Email: { required: "Please enter your email address." }
    },
    submitHandler: function(form) {
        jQuery(form).ajaxSubmit({
            target: '#client-script-return-data',

            success: function() { $(".dialog_form").dialog("close"); successEvents('#client-script-return-msg'); }
         });
     }
});

$(".Roster").click(function(event) { 
  event.preventDefault();
  URL = "roster.cfm?" + $(this).attr("href");
  $('<div class="dialog_form">').dialog({
    title: "Student Roster",
    width: 800,
    height: 650,
    modal: true,
    open: function ()
      {
       $(this).parent().appendTo("#RosterForm");
       $(this).load(URL);
      },
    close: function() {
        $(".dialog_form").remove();
    },
    buttons: {
              "Send Email": function() { $("#RosterForm").submit(); },
              "Cancel": function() { $(this).dialog("close"); }       
             }
});

return false; 
});

【问题讨论】：

标签： jquery jquery-ui dialog

【解决方案1】：

向“发送电子邮件”按钮添加条件：

buttons: {
    "Send Email": function() { 
        if (jQuery(#RosterForm").valid() {
            $("#RosterForm").submit(); 
        } else {
            // display errors
        }
    },

【讨论】：

您提供的代码根本没有帮助。它确实在对话框中提交表单，但对话框不会关闭。