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

效果图如下：