Jquery对话验证

时间:2011-05-31 14:43:47

标签: jquery jquery-ui dialog

我正在试图弄清楚为什么我的错误消息没有出现在Dialog中,以及当我填写表单并单击“发送电子邮件”时Dialog没有关闭的原因。我确信这是我失踪的东西,但我没有看到它。

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

1 个答案:

答案 0 :(得分:0)

在“发送电子邮件”按钮中添加条件:

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