ajax异步提交失败弹出遮罩层和jquery.validate自动校验和iframe父窗口元素获取与遮罩问题

在项目中遇到了一个问题，

单独实现遮罩层效果，可以，编写好样式，绑定一个点击事件即可

单独实现jquery自动检验可以，引入js,编写好相应的validate,form action即可

但是，在两者结合，希望实现如下效果：

1.在提交之前，失去焦点的时候，需要validate的自动校验

2,带着图片上传，因此图片上传至图片服务器时，若连接超时，希望弹出遮罩层提示连接超时

在加上遮罩层后，发现validate校验功能不管用了，这是因为遮罩层把 type="submit"修改为了 type="button"，无法自动校验了。

实际上还是可以用validate的submitHandler来让遮罩层在提交之前显示的，提交就需要用ajax异步提交了。

其中在遮罩遇到的问题上还有：

1.遮罩div如何遮罩iframe元素使用中的父窗口

2.如何修改iframe父页面中的元素

针对问题1.

需要把遮罩层div和遮罩事件写在父窗口中

js如下：

function htmlEditor()
{
	$("#overlay").css("height",$(window.parent).height());     
    $("#overlay").css("width",$(window.parent).width());     
    $("#overlay").show(); 
    $('.theme-popover-mask').fadeIn(100);
	$('.theme-popover').slideDown(200);
}
function HideIframe()
{
    $("#overlay").hide();
    $('.theme-popover-mask').fadeOut(100);
    $('.theme-popover').slideUp(200);
}

html如下：

<div class="theme-popover" style="display:none">
     <div class="theme-poptit">
          <a href="javascript:;" title="关闭" class="close"></a>
          <h3>正在提交中</h3>
     </div>
     <div class="theme-popbod dform">
          <span id="errorspans">正在提交中，请稍后</span> 
     </div>

css中遮罩如下，其他略。

#overlay {
    background: #999;
    filter: alpha(opacity=50); /* IE的透明度 */
    opacity: 0.5;  /* 透明度 */
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100; /* 此处的图层要大于页面 */
    display:none;
}

然后，在子页面中 需要遮罩的地方就直接使用parent.HideIframe();等调用遮罩事件即可。

针对问题2：

比如父页面中有id为errorspans的元素，可以在子页面使用

$('#errorspans', window.parent.document).text("连接超时,请重新尝试");修改元素的值。

下面是关于validate校验中的具体实现，其中涉及到

1.对用户名的验重

2.对radiro等错误信息的提示位置

3.在submit之前显示一下遮罩层

4.ajax异步提交和提交之后返回相应页面

 $("#dbform").validate({
        rules: {
        	iconname:{
                required: true,//是否必须，和message中的提示信息对应
                maxlength: 10,//最大长度
                remote: {//验证用户名是否存在，使用了异步提交到isexitsiconname的方法
                    type: "post",
                    url: "IsExitsIconname",//地址
                    data: {//提交的参数name和id
                        name: function() {
                            return $("#iconname").val();
                        },
                        id: function() {
                            return $("#iconid").val();
                        }
                    },
                    dataType: "html",
                    dataFilter: function(data, type) {//提交后的数据解析
                    	var obj = eval("("+data+")"); //json数据 
                    	var retcode = obj.retcode;
         	    	var retmsg = obj.retmsg;
                    	if(retcode == -12){//跟后台对应，后台返回值-12表示用户名已存在
                            return false;
                        }
                        else{
                            return true;
                        }
                    }
                }//remote结束
            },
            icontype:{
            	required: true
            },
            fileimage:{
		           required:true
		      },
	    iconprompt:{
			   maxlength:100
		       },
	    oiconlocurl:{
            	maxlength: 100
            }
        },
        messages:{
        	iconname:{
                required: "频道名称不能为空",
                maxlength: "频道名称少于20个字符",
                remote:"该频道名称已存在"//remote返回false的情况下会显示次内容
            },
            icontype:{
            	required: "请选择频道类别"
            },
            fileimage:{
				required:"请上传图片"
			},
	   iconprompt:{
				maxlength:"频道备注少于100个字符"
			},
           oiconlocurl:{
            	maxlength: "订单中心最大字符为100个"
            }
        },
        submitHandler: function() {//ajax异步提交，若报错，则弹出遮罩层弹出框
            login();  
            return true;  
        },
        errorPlacement: function (error, element) { //指定radio错误信息位置
	            if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
	                    var eid = element.attr('name'); //获取元素的name属性
	                    error.appendTo("span[id='errortips']"); //将错误信息添加指定元素中
	           } else {
	                     error.insertAfter(element);//jquery validate默认的将错误信息添加到当前元素的父元素后面
	           }
         }
    });

    login = function() {
    	var url;
    	if($("#iconid").val()==null || $("#iconid").val()=="")
    	{
    		url=$("#addurl").val();
        }else{
        	url=$("#updateurl").val();
        }//提交的urL是新增还是更新
    	parent.htmlEditor();//调用父页面的显示遮罩层函数
    	var formData = new FormData($("#dbform")[0]);//用于带有图片提交的form序列化
    	$.ajax({//ajax异步提交
		       type:"post",
		       url:url,
		       data:formData,
		       async: false,  
	          	cache: false,  
	          	contentType: false,  
	          	processData: false,
		        success:function(data){
		        	var retcode = data.retcode;
					var retmsg = data.retmsg;
					if(retcode == 0){
			        	 parent.HideIframe();//提交成功后调用父页面的隐藏遮罩层方法
			        	 window.location.href="queryIcons";//跳转到queryicons方法
		        	}else{
		        		$('#errorspans', window.parent.document).text("连接超时,请重新尝试");//修改父页面弹出框中span的内容
		        		setTimeout(function(){//提示错误信息一定时间后隐藏遮罩层，并跳转至queryicons方法中
		        			parent.HideIframe();
		        			window.location.href="queryIcons";
		        		},10000);
		        	}
		        },error: function(XMLHttpRequest, textStatus){
			    	   alert(XMLHttpRequest.responseText);
			       }
    	});
    }

效果图如下：