jquery+ajax验证不通过也提交表单问题处理
这篇文章主要介绍了jquery validationEngine中使用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是否有值就可以了.
原文链接:http://www.kubiji.cn/topic-id4378.html
注:相关阅读请移步到文章档案, WEB前端, JS代码频道。
- jquery+ajax验证不通过也提交表单问题处理原文出处:http://www.kubiji.cn/topic-id4378.html
转载于:https://www.cnblogs.com/amingstudio/p/6489258.html
jquery+ajax验证不通过也提交表单问题处理相关推荐
- jquery 表单验证 ajax提交,jquery.validationEngine ajax验证 不通过也提交表单
今天用到了jquery.validationEngine ajax验证,碰到了一个让人很郁闷的问题 ajax验证不通过时也提交表单,在网上找了半天也没找到答案,让人很 没办法,看源码了 调试了半天,终 ...
- Jquery Ajax自定义无刷新提交表单Form
Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...
- 【jQuery】使用jquery.form.js,获取提交表单返回值
jQuery表单库介绍 实现 html 中提交表单并实现不跳转页面处理返回值 jQuery表单库(jquery.form.js库)以jQuery为基础,用于处理表单AJAX提交,使得表单AJAX提交简 ...
- jquery输入框按下回车提交表单
jQuery on()方法是官方推荐的绑定事件的一个方法 $('#password').on('keydown', function(e) {// 短路语法,当e.keyCode == 13成立的时候 ...
- jquery提交表单_jQuery提交表单
jquery提交表单 jQuery submit() function triggers when a user tries to submit a form. jQuery submit form ...
- html 禁用回车提交,HTML防止input回车提交表单
原链接:https://blog.csdn.net/ligang2585116/article/details/44699567 自动提交情况说明: 1.默认情况下,单个输入框,无论按钮的type=& ...
- JQuery ajax提交表单及表单验证
JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目 注:经过验证,formValidator只适合一个页面 ...
- Validator验证Ajax提交表单的方法
当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form在同一个页面的情况,但是提交一个表单以后不想页面刷新或者跳转,那么我们考虑到的就是Ajax提交表单,那么如何让Jquery的validato ...
- ajax如何实现表单验证码,Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)...
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html 验证码提交自验证 用户名 验证码 (function($){ $(docu ...
最新文章
- js中apply和Math.max()函数的问题?
- Spring的静态代理和动态代理
- Python---常见问题
- 建行B2B支付回调参数乱码现象解析
- 36.5. height / width
- Android eclipse中程序调试
- 网络安全技术连载(7)网络安全技术实例分析
- MacBook Pro 屏幕黑线、条纹、线条、舞台灯、残影、横线这样的排线门问题你遇到了吗?很有可能源于官方的设计缺陷,你该何去何从?
- 3d旋转--transform-style: preserve-3d,translate3d(x,y,z),perspective()
- mbp touchbar设置_新款 MBP 配备 Touch Bar 如何关机?
- 《离别小叙》一个感伤的程序员
- 成都 软件 功能测试,成都软件项目验收测试 功能符合性测试 科技项目验收测试报告...
- PageHelper.startPage与PageHelper.offsetPage区别
- uniapp之adbWIFI调试
- 朋友圈如何秀一把!用Python一键生成炫酷九宫格图片!
- 约瑟夫环 -- 丢手绢问题
- emWin在PC上的模拟
- 微博上的幂律,为何微信避开了,抖音呢?
- Moonbeam成功续约新一轮的Polkadot插槽租赁期
- 老卫带你学---CSS 渐变色 (超好看)
热门文章
- H - 数据结构实验之链表九:双向链表
- 操作mysql_操作mysql
- 软件加入使用时间_Mac实用菜单栏管理小工具 Bartender 3 | Mac软件天堂
- mysql创建用户unix,MySQL,无法创建UNIX套接字(12)
- mysql的安全管理_MySQL安全管理
- pyqt5 不报错退出_最新版本Python图形化开发环境Anaconda(Python3.7) +PyQT5+Eric6
- php gdb strace抓包,gdb,strace那些不常用的功能
- 百度下mysql卸载_如何把Mysql卸载干净(亲测有效)
- RT-Thread中自定义 FinSH 命令
- QT4.7和VS2008 顺利安装必读 (最新版)