表單上顯示的jQuery模態提交

我有這個代碼，當用戶提交表單時（這是爲了阻止他們重新提交表單或離開頁面並讓他們知道表單正在做某事）運行表單上顯示的jQuery模態提交

var lastx = 0; 

var loadingAnim = setInterval(function() { UpdateSpinner("#loading", 128, 1536); }, 32); 

function UpdateSpinner(target, step, width) 
{ 
    $(target).css("background-position", lastx + "px 0px"); 
    lastx = (lastx - step) % width; 
} 

var objModal = '<div id="overlay"><div id="loading">loading...</div></div>'; 

function ShowModal() 
{ 
    jQuery('body').append(objModal); 
} 

$('form').submit(function() { ShowModal(); });

現在，這一切工作正常，除了當用戶試圖提交一個沒有被正確填寫的表單時，我使用jQuery Validation插件向他們顯示消息，但模態仍然會出現。所以我的問題是如何顯示模式，但只有在沒有驗證錯誤發生？

這裏是我的驗證代碼的例子：

$(function() { 
    $("#postform").validate({ 
     rules: { 
      post_title: "required", 
      post_url: { 
       required: { 
        depends: function() { 
         return $('input[name=post_category]:checked').val() == '14'; 
        } 
       }, 
       url: true 
      }, 
      post_code: { 
       required: { 
        depends: function() { 
         return $('input[name=post_category]:checked').val() == '13'; 
        } 
       } 
      }, 
      post_content: "required", 
      post_tags: "required" 
     }, 
     messages: { 
      post_title: "Your post MUST have a title", 
      post_url: "Please enter a valid URL, don't forget the http://", 
      post_code: "Please add your code", 
      post_content: "Your post MUST have some content", 
      post_tags: "Please add some tags" 
     } 
    }); 
});

我想也許使用像這樣的：

function HideModal() 
{ 
    jQuery('body').remove(objModal); 
}

如果驗證錯誤運行可能運行？或者會有更好的方法來做到這一點？謝謝。

來源

2011-03-19 Cameron

numberOfInvalids()應該工作：

var $validator = {}; 

$(function() { 
    $validator = $("#postform").validate({ 

     // yada yada validate stuff 

    }); 
}); 

function ShowModal() 
{ 
    jQuery('body').append(objModal); 
} 

function HideModal() 
{ 
    jQuery('body').remove(objModal); 
} 

$('form').submit(function() { 
    if ($validator.numberOfInvalids() > 0) { 
     HideModal(); 
    } else { 
     ShowModal(); 
    } 
});

不知道這是隱藏/的ShowModal（）正確的順序，所以你可能要切換的。另外，從技術上講，你不是隱藏和顯示，而是添加和刪除。

來源

2011-03-19 12:44:26

表單上顯示的jQuery模態提交

回答

相關問題