验证表单通过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