jQuery在提交表單之前先在對話框中驗證表單

Question

目前，我在頁面上有一組字段。 單擊該按鈕，並且通過了這些字段的驗證后，將出現一個對話框模式框。 此框還有一些其他字段，必須先填寫這些字段，然后才能提交表單。

如何顯示第一組字段已驗證並打開對話框而無需提交表單，直到對話框字段也已驗證？

$( "#check-button" )  
    .button()  
    .click(function(e) { 
         // Section 1 
         $(':text, select, textarea').each(function() {  
             if ($(this).val().length == 0) {  
                     $(this).css('border', '2px solid red');  
                     e.preventDefault();  
             }  
         });  

         //Section 2
         //e.preventDefault();
         //$('#my_form').submit();
         //$( "#dialog-form" ).dialog( "open" );
});

我嘗試將以上兩個部分都注釋掉。 第1節將所有內容突出顯示，並且不提交我的表格。 第2節提交了我的表格，其中沒有第二項得到驗證。 這兩個部分的輸入都是同一表格的一部分。 請讓我知道是否還有其他需要說明的情況。

總而言之，我正在尋找一種基於id驗證每個項目的方法，一旦第一組通過，請打開對話框，允許用戶輸入第二組並驗證第二組字段。 最后，提交表格。

預先感謝您的指導。

Answer 1

一種方法是創建一個validate函數並return true; 如果所有字段看起來都不錯，否則return false; ...如果返回true，則顯示對話框。

為您提供一個簡單的示例（我做了自己的修改，但您應該明白了）： http : //jsfiddle.net/iwasrobbed/acU4Q/1/

順便說一句，如果要在字段上檢查0長度，請確保使用trim()以便刪除所有空格。 按當前方式，一次按下空格鍵實際上將意味着輸入有效，即使該字段為空白。

Answer 2

您可以將所需的任何行為綁定到表單的提交操作。 如果表單通過AJAX發送，我將執行以下操作：

$(document).ready(function() {
  $("form#first").submit(function() {
    if (validate(this)) { $("form#second").show(); }
    return false; // to prevent the form from going to your server
  });
  $("form#second").submit(function() {
    var form = $(this);
    if (validate(form)) {
      $.ajax({
        url: form.attr("action"),
        data: form.serialize() + $("form#first").serialize(),
        type: form.attr("method"),
        dataType: "script"
      });
    }
    return false;
  });
});

基本上，如果第一個表格有效，則打開第二個表格。 然后，如果第二個表單有效，則可以從兩個表單中提交數據。

如果您想同步執行此操作，則我的理解是可以將$.ajax的async選項設置為false ，將dataType action設置為"html" ，盡管我從來沒有自己做過。