ASP.NET MVC Unobtrusive JavaScript 实现 onfocusout 验证, onfocusin 清除错误

在 ASP.NET MVC 中启用 Unobtrusive JavaScript 功能,可以在运行时由服务器端根据Model中设置的验证规则,自动生成客户端验证js代码(结合jquery.validate)。这很好地解决了表单验证时一次代码,两次验证(客户端+服务器端)的问题。

使用它很简单,主要操作步骤如下:

1. 在web.config增加如下设置:

<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

2. 在NuGet中引用jquery.validate与jquery.validate.unobtrusive

3. 在页面中添加js引用:

<script type="text/javascript" src="/scripts/jquery.validate.min.js"></script>
<script src="/scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

4. 在model中添加验证规则,示例代码如下:

public class SignupUser
{
[Required(ErrorMessageResourceName = "DefaultRequireErrorMsg",
ErrorMessageResourceType = typeof(Resources))]
[DataType(DataType.EmailAddress)]
public string Email { get; set; }
}

5. 在页面中添加表单生成代码,比如:

@using(Html.BeginForm())
{
@Html.LabelFor(m=>m.Email)
@Html.TextBoxFor(m=>m.Email)
@Html.ValidationMessageFor(m=>m.Email)
}

参考文章:Unobtrusive JavaScript in ASP.NET MVC 3

进入正题

默认情况下,jquery.validate.unobtrusive只在点击表单提交按钮时才触发验证,验证出错时,光标移入输入框不会清除错误提示信息(jquery.validate也一样,unobtrusive只是jquery.validate的一个扩展)。

而我们的需求是,只要光标移出输入框(onfocusout)就触发验证,光标移入输入框(onfocusin)时清除错误信息。

效果如下:

1. 光标移出(onfocusout)时

2. 光标移入(onfocusin)时

如何解决这个问题呢?

解决方法是简单的,找到解决方法的过程是曲折的。

jquery.validate对这个需求并没有提供很好的支持,需要研究它的代码,接管onfocusout与onfocusin的事件处理,并屏蔽onkeyup的事件处理。最终解决问题的代码如下:

针对jquery.validate.unobtrusive:

$.validator.setDefaults({
//光标移出时
onfocusout: function (element) {
this.element(element);
},
//光标移入时
onfocusin: function (element, event) {
//找到显示错误提示的标签并移除,针对jquery.validate.unobtrusive
var errorElement = $(element).next('span.field-validation-error');
if (errorElement) {
errorElement.children().remove();
}
},
onkeyup: function (element, event) {
}
});

如果没有使用jquery.validate.unobtrusive,想在jquery.validate中实现同样的效果,对应的代码如下:

$.validator.setDefaults({
//光标移出时
onfocusout: function (element) {
this.element(element);
}, //光标移入时
onfocusin: function (element, event) {
//仅针对jquery.validate
var errorElement = this.errorsFor(element);
if (errorElement) {
errorElement.remove();
}
},
onkeyup: function (element, event) {
}
});

好了,这篇博文就是为了分享一下自己摸索出来的解决方法。

相关博问:ASP.NET MVC 表单验证用什么好

jquery.validate.unobtrusive的更多相关文章

  1. 改写jquery.validate.unobtrusive.js实现气泡提示mvc错误

    个人对于这个js.css不是很擅长,所以这个气泡提醒的样式网上找了下,用了这个http://www.cnblogs.com/wifi/articles/2918950.html当中的第一种写法. 对于 ...

  2. jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示

    类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate.jq ...

  3. jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js)

    最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...

  4. 360浏览器下jquery.validate.unobtrusive的日期验证问题

    今天在招聘频道(job.cnblogs.com)遭遇这样一个问题——在360浏览器下,在一个表单验证中,虽然输入了有效的日期,却总是提示日期格式错误,见下图: 而在Chrome/Safari/Fire ...

  5. jquery.validate.unobtrusive.js插件作用

    在 ASP.NET MVC 中启用 Unobtrusive JavaScript 功能,可以在运行时由服务器端根据Model中设置的验证规则,自动生成客户端验证js代码(结合jquery.valida ...

  6. .net MVC内置js验证 jquery.validate.unobtrusive.js重置验证操作(备忘,找了很多次了)

    (function ($) { $.validator.unobtrusive.parseDynamicContent = function (selector) { //use the normal ...

  7. MVC3.0修改jquery.validate.unobtrusive.js实现气泡提示mvc错误

    CSS部分 <style type="text/css"> .hide {display:none;} .poptip { position: absolute; to ...

  8. MVC的验证 jquery.validate.unobtrusive

    jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js) 2013-07-22 19:07 4568人阅 ...

  9. jquery.validate.unobtrusive.js实现气泡提示mvc错误

    改写jquery.validate.unobtrusive.js实现气泡提示mvc错误 个人对于这个js.css不是很擅长,所以这个气泡提醒的样式网上找了下,用了这个http://www.cnblog ...

随机推荐

  1. javamail发送邮件(转)

    今天学习了一下JavaMail,javamail发送邮件确实是一个比较麻烦的问题.为了以后使用方便,自己写了段代码,打成jar包,以方便以后使用.呵呵 以下三段代码是我的全部代码,朋友们如果想用,直接 ...

  2. ssh 实体关系分析确立(ER图-实体关系图)

    比較简单的方式就是依据模仿同类产品,依据同类产品的进行模仿,表单就是一个起码要加的字段,然后依据项目须要额外添加字段. 注意:实体类之间的引用关系还须要考虑性能的影响.如:单向或是双向. 表设计: 设 ...

  3. App域名劫持之DNS高可用 - 开源版HttpDNS方案详解(转)

      http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=209805123&idx=1&sn=ced8d67c3e2cc3 ...

  4. friend keyword 对于模板 并不只不过友元!!!

    friend是C++中封装的漏网之鱼. C++中的friend同意其它的类或者是函数訪问本类的不论什么成员.甚至是private成员,仅仅要该类声明其为友元. 但是,在有些情况下,并非同意外界訪问类的 ...

  5. Android数据存储——SQLite数据库(模板)

    本篇整合Android使用数据库,要保存一个实体类的样本. 首先看一下数据库语句: ORM:关系对象映射 添加数据: ContentValues values = new ContentValues( ...

  6. Spring官方网站的改版后下载

    Spring官方网站改版很长一段时间后还没有找到直接下载Jar链接包,下面总结了一些方法,可在网上,亲測可用. 1.直接输入地址,改对应版本号就可以:http://repo.springsource. ...

  7. DBMS_STATS.GATHER_TABLE_STATS

    由于Oracle的优化器是CBO,所以对象的统计数据对执行计划的生成至关重要! 作用:DBMS_STATS.GATHER_TABLE_STATS统计表,列,索引的统计信息(默认参数下是对表进行直方图信 ...

  8. 一个简单的带缓存http代理

    眼下1.0版模型非常easy.即对客户机发来的请求进行简单处理后,转发到server.转发之前先检查本地缓存.假设有.则直接回送给客户本地资源 程序流程大致例如以下图: 缓存是通过把文件保存到磁盘上, ...

  9. windows下使用lighttpd+php(fastcgi)+mysql

    一.windows下编译配置执行lighttpd 1.下载并安装cygwin. 2.下载lighttpd源码并解压3.在cygwin环境下进入lighttpd的解压文件夹后,执行: 1> ./c ...

  10. Swift语法学习之 类和结构体

    类和结构体 本页包括内容: 类和结构体对照 结构体和枚举是值类型 类是引用类型 类和结构体的选择 集合(collection)类型的赋值与复制行为 与其他编程语言所不同的是,Swift 并不要求你为自 ...