0

我结合了 2 个 jQuery 工具：覆盖和验证器。两者分别工作得很好。但是，当我将它们组合在一起时...（将联系人表单加载到具有外部负载的叠加层中）我无法访问验证器 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'});

它加载在覆盖元素内，使其成为整个代码：

$(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();
        }
    });
});



});
4

1 回答 1

0

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

  • 日期输入/日期输入.js
  • 范围输入/范围输入.js
  • 验证器/validator.js

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

于 2012-07-10T22:27:15.727 回答