Question

我结合了2个jQuery工具：overlay和validator。两者都分开工作。但是当我将它们组合起来...（将覆盖形式加载到外部负载的覆盖层中）我无法到达验证器api（或实例）验证器部分工作。但我无法到达onSucces事件，阻止表单在所有人都被验证之前提交。

请帮帮我。

这是验证器加载脚本：

$("#frm_contact").validator({api:true}).submit(function(e) {
                e.preventDefault();
                e.stopPropagation();
                api = $("frm_contact").data("validator");
                // use API to assign an event listener
                api.onSuccess(function(e, els) {
                alert("prima");
                pageTracker._trackPageview('/ContactSubmit');
                         $.ajax({
                              type:'POST', 
                              url: 'process.php', 
                              data:form.serialize(), 
                              cache: false,
                              beforeSend: function(){
                                $('.contentWrap').html("<br /><br /><br /><h3 class=\"contact\">Processing your request...</h3>").fadeIn('slow');
                              }, 
                              error:function(xhr, status, errorThrown) { 
                                //alert(errorThrown+'\n'+status+'\n'+xhr.statusText); 
                              },
                              success: function(response) {
                                $('.contentWrap').html(response).fadeIn('slow', function(){
                                    $('.contentWrap').delay(5000).fadeOut('slow', function(){   
                                        overlayElem.overlay().close();
                                    });
                                });
                              },
                         });

                return false;               
                });          
            });

            $.tools.validator.localize("en", {'[required]'    : '* Required'});

加载到overlay-element中，使其成为整个代码：

$(function(){   
    $("#ctactbtn").live('click', function (e) {
    e.preventDefault(); //prevent default link action
    e.stopPropagation();

    overlayElem = $(this); 
    $(this).overlay({
        mask: 'silver',
        api: true,
        load: true,
        onBeforeLoad: function() {
             pageTracker._trackPageview('/contact');

            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".contentWrap");
            $(".contentWrap").fadeIn();
            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));
        },
        onLoad: function() {
            lastCountry = "";
            $('#countries').change(function () { 
                var option = $("#"+$(this).val()).attr('option');
                if(lastCountry != null){
                    $(lastCountry).fadeOut(500, function() {if(option == "CC"){ $(".contentWrap").animate({height: '400'},500);$(".cWbg").animate({height: '400'},500);}});
                }
                if(option == "CC_Details" | "Details" ){
                    huidig = $("#"+$(this).val());
                    $(".cWbg").animate({height: '460'},500);
                    $(".contentWrap").animate({height: '460'}, 500, function(){ huidig.fadeIn(); });
                }
                if(option == "CC_Details" | "CC" ){
                    $('#CC').val($("#"+$(this).val()).attr('email'));
                } else {
                    $('#CC').val("");
                        if(lastCountry != null){
                            $(lastCountry).fadeOut(500, function() {$(".contentWrap").animate({height: '400'},500);$(".cWbg").animate({height: '400'},500);});
                        }
                }
                lastCountry = "#"+$(this).val(); 
            }).change();


            $("#frm_contact").validator({api:true}).submit(function(e) {
                e.preventDefault();
                e.stopPropagation();
                api = $("frm_contact").data("validator");
                // use API to assign an event listener
                api.onSuccess(function(e, els) {
                alert("prima");
                pageTracker._trackPageview('/ContactSubmit');
                         $.ajax({
                              type:'POST', 
                              url: 'process.php', 
                              data:form.serialize(), 
                              cache: false,
                              beforeSend: function(){
                                $('.contentWrap').html("<br /><br /><br /><h3 class=\"contact\">Processing your request...</h3>").fadeIn('slow');
                              }, 
                              error:function(xhr, status, errorThrown) { 
                                //alert(errorThrown+'\n'+status+'\n'+xhr.statusText); 
                              },
                              success: function(response) {
                                $('.contentWrap').html(response).fadeIn('slow', function(){
                                    $('.contentWrap').delay(5000).fadeOut('slow', function(){   
                                        overlayElem.overlay().close();
                                    });
                                });
                              },
                         });

                return false;               
                });          
            });

            $.tools.validator.localize("en", {'[required]'    : '* Required'}); 


        },
        onBeforeClose: function(){
            $("#frm_contact").data("validator").reset();
            $('.error').hide(); $('.error').empty();
        }
    });
});



});

Answer 1

我最近遇到过类似的事情。看起来在以下3个库之间共享依赖代码：

dateinput / dateinput.js
rangeinput / rangeinput.js
验证器/ validator.js

我只在项目中使用验证器，但为了使其正常工作，我必须在从JQuery UI站点生成JS文件时包含对所有3个相关库的引用。

jQuery Tools overlay＆amp;验证器组合...无法到达验证器api

1 个答案: