jquery+ajax验证不通过也提交表单问题处理
validationengine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationengine验证表单的形式有几种方式:
1 使用正常的表单提交.这种情况validationengine验证不通过是不会提交表单的.
2 使用ajax提交表单,但是没有使用ajax验证.
这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如:
代码如下:
//验证不通过时return
if(!$("form#ajaxform").validationengine("validate")) return ;
$.ajax({
type: "post",
url: $("#ajaxform").attr("action"),
data: $("#ajaxform").serialize(),
datatype: "html",
success: function(data){
xxxx }
});
3 使用正常表单提交,但是有使用ajax验证,这种方式有点让人纠结了.当我们提交表单时ajax验证不通过也能提交表单,关于这种情况,网上很多例子是改的,下面是截图:
.这种方法对于目前这种情况可行,这种修改的方式本身就不建议,可能对其它地方产生影响.我发现的其中一个就是当下面这种情况时:
代码如下:
function beforecall(form,options){
if(window.console){
console.log("表单提交验证通过后，ajax 提交之前的回调");
};
return true;
};
//
function ajaxvalidationcallback(status,form,json,options){
if(window.console){
console.log(status);
};
if(status === true){
alert("the form is valid!");
}
};
jquery(document).ready(function(){
jquery("#formid").validationengine({
ajaxformvalidation: true, //是否使用 ajax 提交表单
ajaxformvalidationmethod: 'post', //设置 ajax 提交时，发送数据的方式
onajaxformcomplete: ajaxvalidationcallback, //表单提交，ajax 验证完成后
onbeforeajaxformvalidation: beforecall //表单提交验证通过后，ajax 提交之前的回调
});
});
beforecall 这个方法是不会调用的是不会调用的,所以还是不能使用
4 使用ajax验证并且使用ajax提交表单,这个方式就让人纠结了,上面修改源码的方式就不好用了.
对于第三种和第四种方式,解决方式如下:
在使用ajax验证的表单form标签上加上自定义属性control="username,email" 属性值为要使用ajax验证的控件id(多个控件使用逗号分隔开).
代码如下:
<form method="post" id="ajaxform2controls" action="admin/user/savepro.htm" control="username">
在每个需要验证的控件上加上两个属性url(ajax请求的地址)和errror(不通过时的提示信息)
代码如下:
<input class="textbox validate[required,minsize[6],maxsize[128],custom[onlyletternumber]]" type="text" name="username" id="username" maxlength="128" url="admin/user/uniquename.htm" error="用户已存在..."/>
javascript当中声明两个全局数组
代码如下:
var controlid = new array(); //保存验证不通过的控件id
var errors = new array() ; //保存验证不通过的提示信息
思路是这个的获取form标签上的control属性上的值(使用逗号分隔获取每个控件id),使用ajax遍历请求,当验证不通过时 将控件id和提示信息添加到controlid 和 errors 中,并且提示信息.当提交表单时判断controlid 是否为空,不为空则循环显示提示信息.
代码如下:
$(function() {
var ajaxform2controls = $("form#ajaxform2controls") ;
//表单提交时
$(ajaxform2controls).submit(function() {
ajaxform2control(ajaxform2controls) ;
return false ;
}) ;
//失去焦点时验证控件
valcontrols(ajaxform2controls) ;
});
表单提交方法:
代码如下:
function ajaxform2control(obj) {
//当存在错误信息时返回,找显示错误信息
if(controlid.length > 0) {
alertinfo() ;
return false ;
}
if(!$(obj).validationengine("validate")) return false; //验证没有使用ajax验证的控件(不是ajax验证的字段是可以正常验证的, 不通过就返回)
$.ajax({
type: "post",
url: $(obj).attr("action"),
data: $(obj).serialize(),
datatype: "html",
success: function(data){
xxxxxx
}
});
}
为表单添加焦点事件
代码如下:
//表单需要验证的控件
function valcontrols(ajaxform2controls) {
//获取需要使用ajax验证的控件
var controlsstr = ajaxform2controls.attr("control") ;
//属性未定义时返回
if(typeof(controlsstr) === "undefined" || controlsstr.length <= 0) return ;
//分隔获取控件id
var controls = controlsstr.split(/,/g) ;
for(var i in controls) {
//添加焦点离开事件
$("#" + controls[i]).blur(function() {
if($(this).val().length <= 0) return false;
//重新设置数组
controlid.length = 0;
errors.length = 0 ;
//错误信息
var error = $(this).attr("error") ;
$.ajax({
type: "get",
url: $(this).attr("url"),
data: $(this).serialize(),
datatype: "text",
success: function(data){
if(data==="true") {
//验证不通过将错误信息放入数组中
controlid.push(controls[i]);
errors.push(error) ;
//提示信息
alertinfo() ;
}
}
});
}) ;
}
}
错误提示信息:
代码如下:
//弹出信息
function alertinfo() {
if(controlid.length > 0) {
for(var i in controlid) {
//validationengine方法,为指定id弹出提示.
//用法:<span style="">$("#id").validationengine("showprompt","提示内容","load");
//<span style="">在该元素上创建一个提示，3 种状态："pass", "error", "load"</span></span>
$("#" + controlid[i]).validationengine("showprompt", errors[i], "error");
}
}
}
这样当我们无论是第三种方式还是第四种方式提交表单,提交前调用controlid是否有值就可以了.