validate[.unobtrusive]和Bootstrap实现tooltip错误提示
validate[.unobtrusive]和Bootstrap实现tooltip错误提示
类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此。最终效果如下:
后端使用Asp.net mvc5,前端框架有:jquery.validate、jquery.validate.unobtrusive、requirejs、Bootstrap,都是当前最/较新版本。jquery.validate就不用说了,目前比较流行的前端校验组件;jquery.validate.unobtrusive基于jquery.validate,是为了配合Asp.net mvc,微软自己写的,NuGet下可查找Microsoft.jQuery.Unobtrusive.Validation安装,具体怎么用请继续往下看。
首先在后台我们定义实体类:
实体定义
实体各属性上面有Attribute形式的校验规则,当用户提交一个Model到后端Action时,MVC框架会据此自动帮我们完成校验工作,于是后端开发就很开心。然而在数据提交之前,前端也有必要进行第一轮的校验,如果使用jquery.validate,那么需要在js或标签里再写一遍类似的规则,能不能复用后端已有的代码呢?我们以属性EnterpriseNo为例,在cshtml中写:
@Html.TextBoxFor(m => m.BasicInfo.EnterpriseNo, new { placeholder = "必填项", @class = "form-control" })
最终生成的html如下:
<input class="form-control" data-val="true" data-val-maxlength="字段 EnterpriseNo 必须是最大长度为“30”的字符串或数组类型。" data-val-maxlength-max="30" data-val-required="信用代码/注册号不能为空" id="BasicInfo_EnterpriseNo" name="BasicInfo.EnterpriseNo" placeholder="必填项" value="" data-original-title="" title="" type="text">
标签里面自动加上了很多data-开头的属性,data-val表示该控件需要校验,其它data-开头的就是一系列校验规则和失败时的错误信息,错误信息可以自定义,否则框架会给你生成类如“字段 EnterpriseNo 必须是最大长度为30的字符串或数组类型。”这种机器翻译语言。当然这些属性jquery.validate是不认的,要让jquery.validate认识,就需要jquery.validate.unobtrusive出马了。
现在我们来说这些js如何配合使用。
新版本的jquery.validate已经支持AMD模式,所以可以直接使用requirejs加载,jquery.validate.unobtrusive则不行,需要shim配置,代码:
require.config({
baseUrl: '/scripts',
paths: {
"jquery": 'jquery-2.2.3.min',
"knockout":'knockout-3.4.0',
"bootstrap":'../components/bootstrap/3.3.6/js/bootstrap.min','validate':'jquery.validate',
'validateunobtrusive':'jquery.validate.unobtrusive.min'
},
shim : {
'bootstrap' : {
deps : [ 'jquery' ],
exports : 'bootstrap'
},
'validateunobtrusive':{
deps:['validate'],
exports: 'validateunobtrusive'
}
}
});
配置好后,在页面中require,此时点击submit按钮提交表单,各js就开始作用了。但是除了焦点会落到第一个校验失败的控件上,似乎并没有其它效果,连jquery.validate默认的在控件后面展示错误信息(errorPlacement函数)都没有了,are you kidding me?其实这是因为jquery.validate.unobtrusive覆盖了errorPlacement配置项(看源码中的attachValidation函数),对我们来说反而省了一道工序。由于tooltip的html标记是由bootstrap动态生成的,所以errorPlacement并不适合我们,参考本文开头的链接,选择覆写showErrors函数,核心代码如下(tooltipvalidator.js):
1 define(['validateunobtrusive'], function () {
2
3 function TooltipValidator() {}
4
5 TooltipValidator.prototype = {
6 init: function (validatorOptions, tooltipOptions) {
7 tooltipOptions = tooltipOptions || {};
8 validatorOptions = validatorOptions || {};
9
10 this._tooltipOptions = $.extend({}, {
11 placement: 'top'
12 }, tooltipOptions, { animation: false });
13
14 this._validatorOptions = $.extend({}, {
15
16 //errorPlacement: function (error, element) {
17 // // do nothing
18 //},
19
20 showErrors: function (errorMap, errorList) {
21 for (var i = 0; i < this.successList.length; i++) {
22 var success = this.successList[i];
23 $(this.successList[i]).tooltip('destroy');
24 $(this.successList[i]).parents('div.form-group').removeClass('has-error');
25 }
26 for (var i = 0; i < errorList.length; i++) {
27 var errorElement = $(errorList[i].element);
28 errorElement.parents('div.form-group').addClass('has-error');
29 errorElement.attr('data-original-title', errorList[i].message).tooltip('show');
30 }
31 },
32
33 submitHandler: function (form) {
34 return false;
35 }
36
37 }, validatorOptions)
38
39 this._configTooltip();
40 this._configValidator();
41 },
42
43 _configTooltip: function () {
44 $('[data-val="true"]').tooltip(this._tooltipOptions);
45 },
46
47 _configValidator: function () {
48 $.validator.setDefaults(this._validatorOptions);
49 $.validator.unobtrusive.parse(document);
50 }
51 }
52
53 return new TooltipValidator();
54 });
这样我们就可以在require回调函数中执行tooltipvalidator.init,不需要另外再写逻辑,于是前端同学也开心的笑了。这里还有一处需要注意,大家看到第49行代码,这是初始化jquery.validate.unobtrusive的步骤。原本jquery.validate.unobtrusive在其代码中已经有$(function () { $jQval.unobtrusive.parse(document); });但是由于$.ready会在Dom元素加载完成后(题外话:不是渲染完成)就执行,因此它会在tooltipvalidator有机会_configValidator之前完成,导致咱们的配置项无效(如果是在单页无刷新应用中,会发现之后再次加载局部页时,配置项有效了,因为$.ready只在初次加载的时候执行,而require回调会每次加载都执行)。有两种解决方法:1、让jquery.validate.unobtrusive依赖tooltipvalidator;2、移除jquery.validate.unobtrusive中的$jQval.unobtrusive.parse(document);这里选择第2种。
validate[.unobtrusive]和Bootstrap实现tooltip错误提示的更多相关文章
- jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示
类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate.jq ...
- 改写jquery.validate.unobtrusive.js实现气泡提示mvc错误
个人对于这个js.css不是很擅长,所以这个气泡提醒的样式网上找了下,用了这个http://www.cnblogs.com/wifi/articles/2918950.html当中的第一种写法. 对于 ...
- MVC3.0修改jquery.validate.unobtrusive.js实现气泡提示mvc错误
CSS部分 <style type="text/css"> .hide {display:none;} .poptip { position: absolute; to ...
- jquery.validate.unobtrusive.js实现气泡提示mvc错误
改写jquery.validate.unobtrusive.js实现气泡提示mvc错误 个人对于这个js.css不是很擅长,所以这个气泡提醒的样式网上找了下,用了这个http://www.cnblog ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- 使用tooltip显示jquery.validate.unobtrusive验证信息
通过重写CSS实现使用tooltip显示jquery.validate.unobtrusive验证信息,效果如图: 1. 在ViewModel中定义验证规则 [Display(Name = " ...
- 设置jQuery validate插件错误提示位置
参照上一篇bootstrap布局注册表单 使用校验插件默认位置显示提示信息,发现错误提示信息换行了,由于增加了提示信息,表单显示高度也增加了,如下 默认提示信息位置代码为 将错误提示设置其显示在右边, ...
- jquery validate 二选一,错误提示在一处
转载自:http://blog.51yip.com/jsjquery/1483.html 有一同事对jquery validate这个插件不熟,实现多处报错信息在一处,并且还有二选一的情况,二个输入框 ...
- 360浏览器下jquery.validate.unobtrusive的日期验证问题
今天在招聘频道(job.cnblogs.com)遭遇这样一个问题——在360浏览器下,在一个表单验证中,虽然输入了有效的日期,却总是提示日期格式错误,见下图: 而在Chrome/Safari/Fire ...
随机推荐
- [未完成]关于JavaScript总结
jsp服务端,js客户端. javascript 是基于对象和事件驱动的脚本语言. 特点: 交互性 安全性(不允许直接访问本地硬盘) 跨平台性(只要是可以解析java的浏览器都可以执行,和平台无关) ...
- hdu 4612 边连通度缩点+树的最长路径
思路:将以桥为分界的所有连通分支进行缩点,得到一颗树,求出树的直径.再用树上的点减去直径,再减一 #pragma comment(linker, "/STACK:1024000000,102 ...
- Sherlock and The Beast
Sherlock Holmes suspects his archenemy, Professor Moriarty, is once again plotting something diaboli ...
- CSS3秘笈第三版涵盖HTML5学习笔记9~12章
第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...
- Jersey(1.19.1) - Hello World, Get started with Jersey using the embedded Grizzly server
Maven Dependencies The following Maven dependencies need to be added to the pom: <dependency> ...
- Spring(3.2.3) - Beans(7): 延迟实例化
默认情况下,Spring IoC 容器启动后,在初始化过程中,会以单例模式创建并配置所有使用 singleton 定义的 Bean 的实例.通常情况下,提前实例化 Bean 是可取的,因为这样在配置中 ...
- Ubuntu系统下常用的新建、删除、拷贝文件命令
我们在Ubuntu系统中安装程序时,经常要在usr目录下新建.拷贝文件,此文件夹在Linux类系统中需要root权限才能访问,因此用常规的鼠标右键菜单操作是无效的,今天分享一下在终端中使用命令新建.拷 ...
- st_mode 的位定义
先前所描述的st_mode 则定义了下列数种情况: S_IFMT 0170000 文件类型的位遮罩 S_IFSOCK 0140000 scoket S_IFLNK 0120000 符号连接 S_IFR ...
- (转)MongoDb的十个使用要点
从 mongodb 阶段性技术总结 中抽取并整理了对大家有帮助的十个要点: 1.mongodb 表名和字段名统一用小写字母 mongodb 是默认区分大小写的,为了避免以前在 mysql 下遇到的 ...
- (转)Redis复制与可扩展集群搭建
讨论了Redis的常用数据类型与存储机制,本文会讨论一下Redis的复制功能以及Redis复制机制本身的优缺点以及集群搭建问题. Redis复制流程概述 Redis的复制功能是完全建立在之前我们讨论过 ...