驗證表單通過jQuery加載

我使用validity.js（http://validity.thatscaptaintoyou.com/）來驗證名爲contactos.html的文件中的表單。驗證表單通過jQuery加載

我也在使用css-tricks教程「重新思考動態頁面替換內容」（http://css-tricks.com/rethinking-dynamic-page-replacing-content/）來加載div內容。

這種方式，這是在contactos.html中，通過jquery加載到index.html頁面中的div。

問題是，當我想將validity.js應用到表單，當它已經通過jquery加載到index.html頁面時，每次我點擊提交它重新加載頁面，並且不進行驗證。

此驗證僅適用於加載表單原始頁面，即contactos.html。

反思動態頁面更換內容代碼：

$(window).bind("load", function() { 

    if(Modernizr.history){ 

    var everPushedSomething = false; 

    var newHash  = "", 
     $mainContent = $("#content"), 
     baseHeight = 0, 
     $el; 

    $("#selectGoTo select").change(function() { 
     _link = $(this).val(); 
     //alert(_link) 
     history.pushState(null, null, _link); 
     loadContent(_link); 
     everPushedSomething = true; 
     return false; 
    }); 

    $("nav").on("click", "a", function() { 
     var _link = $(this).attr("href"); 
     //alert(_link); 
     history.pushState(null, null, _link); 
     loadContent(_link); 
     everPushedSomething = true; 
     return false; 
    }); 

    function loadContent(href){ 
     $mainContent 
       .find("#contentDiv") 
       .fadeOut(400, function() { 
        $mainContent.hide().load(href + " #contentDiv", function() { 
         $mainContent.fadeIn(400, function() { 

          $("#navSubMenu").on("click", "a", function() { 
           var _link = $(this).attr("href"); 
           //alert(_link); 
           history.pushState(null, null, _link); 
           loadContent(_link); 
           everPushedSomething = true; 
           return false; 
          }); 
          if (href === "contactos.html") { 
           initialize(); 
           $("#newsletter-form").addClass('sky-form'); 
          } else { 
          }; 
          console.log(); 
         }); 
/* 
         $mainContent.fadeIn(200, function() { 
          $pageWrap.animate({ 
           height: baseHeight + $mainContent.height() + "px" 
          }); 
         }); 
         $("nav a").removeClass("current"); 
         console.log(href); 
         $("nav a[href$="+href+"]").addClass("current"); 
*/ 
        }); 
       }); 
    } 

    $(window).bind('popstate', function(){ 
     if (everPushedSomething) { 
      $.getScript(location.href); 
      _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only 
     } 
     everPushedSomething = true; 

     loadContent(_link); 
    }); 

} // otherwise, history is not supported, so nothing fancy here. 


});

有效性代碼：

$("form").validity(function() { 
    $("#fullname")  
     .require("O Nome é obrigatório.") 
     .minLength(12, "O Nome deverá ser mais detalhado."); 
    $("#email") 
     .require("O Email é obrigatório.") 
     .match("email", "Deverá indicar um email válido."); 
    $("#assunto") 
     .require(); 
    $("#confirmacao") 
     .checkboxChecked("Por favor confirme que pretende enviar este email"); 
    //$("#assunto").require("Por favor seleccione um assunto"); 

}); 

$.validity.setup({ 
    // You may change the output mode with this property. 
    outputMode: "summary", 

    // The this property is set to true, validity will scroll the browser viewport 
    // so that the first error is visible when validation fails. 
    scrollTo: false, 

    // If this setting is true, modal errors will disappear when they are clicked on. 
    modalErrorsClickable: true, 

    // If a field name cannot be otherwise inferred, this will be used. 
    defaultFieldName: "This field" 
});

我必須這樣做，當窗體通過jQuery加載的提交按鈕驗證表單代替加載contacts.html頁面

在此先感謝

來源

2013-06-30 user2461766