2010-10-28 160 views
0

我有jQuery驗證工作很好,使用對話框的錯誤消息。我遇到的問題是,當我點擊提交,並且所有字段都填寫正確時,我會在表單提交之前彈出一個空白對話框。我似乎無法弄清楚如何阻止這種情況的發生。將onSubmit設置爲false將不起作用,因爲那樣它根本不會驗證。有任何想法嗎?jQuery驗證與對話框

這是它的腳本標記所有我的jQuery:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#tabs").tabs(); 

     $("#DateOfBirth").datepicker({ changeYear: true, changeMonth: true }); 

     $("#InquiryForm").validate({ 
      submitHandler: function (form) { 
       //form.submit(); 
      }, 
      rules: { 
       FirstName: { required: true }, 
       LastName: { required: true }, 
       Phonenumber: { required: true }, 
       Email: { required: true, email: true }, 
       Address: { required: true }, 
       Country: { required: true }, 
       Zip: { required: true }, 
       CourseDeliveryTime: { required: true }, 
       ProgramType: { required: true }, 
       ProgramofInterest: { required: true }, 
       ProgramType: { required: true }, 
       DateOfBirth: { required: true, date: true } 
      }, 
      messages: { 
       FirstName: { required: 'First Name is required.<br/>' }, 
       LastName: { required: 'Last Name is required.<br/>' }, 
       Phonenumber: { required: 'Phone Number is required.<br/>' }, 
       Email: { required: 'E-Mail is required.<br/>', email: 'Please enter a valid e-mail address' }, 
       Address: { required: 'Mailing Address is required.<br/>' }, 
       Country: { required: 'Country is required.<br/>' }, 
       Zip: { required: 'Zip Code is required.<br/>' }, 
       CourseDeliveryTime: { required: 'Please tell us when you would like to attend class.<br/>' }, 
       ProgramType: { required: 'Preferred Location is required.<br/>' }, 
       ProgramofInterest: { required: 'Intended Academic Program is required.<br/>' }, 
       ProgramType: { required: 'Preferred Location is required.<br/>' }, 
       DateOfBirth: { required: 'Date of Birth is required.', date: 'Please enter a valid date i.e. 01/01/1999' } 
      }, 
      errorPlacement: function (error, element) { 
       error.appendTo($("#dialog")); 

      }, 
      showErrors: function (errorMap, errorList) { 
       this.defaultShowErrors(); 
       $("#dialog").dialog('open'); 
      }, 
      errorContainer: "#dialog", 
      errorLabelContainer: "#dialog ul", 
      wrapper: "li", debug: true, 
      onfocusout: false, 
      onclick: false 
     }); 
     $("#dialog").dialog({ 
      autoOpen: false, 
      modal: true, 
      close: function (event, ui) { 
       $("#dialog").html(""); 
      }, 
      title: 'Please fix the following:', 
      resizable: false, 
      width: 300 
     }); 
     $("#privacyPolicy").dialog({ 
      autoOpen: false, 
      modal: true, 
      title: 'Privacy Policy', 
      resizable: false, 
      height: 210, 
      width: 500 
     }); 
     $("#linkPrivacyPolicy").click(function() { 
      $("#privacyPolicy").dialog("open"); 
      return false; 
     }); 
    }); 
</script> 

回答

0

您可以將您的開放代碼爲invalidHandler,因此只有當錯誤,通過更換此運行:

showErrors: function (errorMap, errorList) { 
    this.defaultShowErrors(); 
    $("#dialog").dialog('open'); 
}, 

有了這個:

invalidHandler: function() { 
    $("#dialog").dialog('open'); 
}, 
+0

真棒這給了我我需要的東西。之後我遇到了一個小問題。我第一次提交它會顯示錯誤很好,但隨後的任何時候它都會是空白的。刪除$(「#dialog」)。html(「」);線固定它。 感謝您的幫助。 – CoreyT 2010-10-28 13:59:12