Question

我正在使用validity.js（http://validity.thatscaptaintoyou.com/）来验证名为contactos.html的文件中的表单。

我也在使用css-tricks教程“重新思考动态页面替换内容”（http://css-tricks.com/rethinking-dynamic-page-replacing-content/）来加载div内容。

这种形式，在contactos.html中，通过jquery加载到index.html页面中的div。

问题在于，当我想将validity.js应用于表单时，当它通过jquery加载到index.html页面时，每当我点击提交时它重新加载页面并且不进行验证。 / p>

此验证仅在我加载表单原始页面时才有效，即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页面

提前致谢

Answer 1

您应该在加载html页面中的内容后调用有效性代码，尝试在initialize()函数内部或之后添加

验证通过jquery加载的表单

1 个答案: