自定义错误消息的显示方式

默认情况下,验证提示信息用label元素来显示, 并且会添加css class, 通过css可以很方便设置出错控件以及错误信息的显示方式。

/* 输入控件验证出错*/
form  input.error { border:solid 1px red;}

/* 验证错误提示信息*/
form label.error{width: 200px;margin-left: 10px; color: Red;}

如果想自定义显示方式,可以修改jquery.validate的默认显示方式

默认用label显示错误消息,可以通过errorElement属性来修改
errorElement: 错误消息的html标签

$(".selector").validate
   errorElement: "em"
})

可以在出错信息外用其他的元素包装一层。
wrapper: 错误消息的外层封装html标签

$(".selector").validate({
   wrapper: "li"
})

验证出错的css class默认是error,通过errorClass可以修改
errorClass: 验证出错时使用的css class

$(".selector").validate({
   errorClass: "invalid"
})

还自定义验证成功时的动作
success: 如果值是字符串,会当做一个css类,如果是一个函数,则执行该函数

$(".selector").validate({
success: "valid"
})

或者

success: function(label) {
label.html(" ").addClass("checked");
}

还可以把错误消息统一到一个容器显示
errorLabelContainer: 将错误消息统一到一个容器显示

$("#myform").validate({
   errorLabelContainer: "#messageBox"
})

默认情况下,错误消息是放在验证元素后面的,可以自定义错误消息的显示位置

$(".selector").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
   }
})

更进一步可以定义一个组,把几个地方的出错信息统一放在一个地方,用error Placement控制把出错信息放在哪里
groups:定义一个组

$(".selector").validate({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
     if (element.attr("name") == "fname" || element.attr("name") == "lname" )
       error.insertAfter("#lastname");
     else
       error.insertAfter(element);
   }
})

高亮显示
highlight: 高亮显示,默认是添加errorClass
unhighlight: 和highlight对应,反高亮显示

$(".selector").validate({
  highlight: function(element, errorClass) {
     $(element).addClass(errorClass);
     $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
  },
  unhighlight: function(element, errorClass) {
     $(element).removeClass(errorClass);
     $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
  }
});

或者可以完全自定义错误显示
showErrors: 得到错误的显示句柄

$(".selector").validate({
   showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids() 
+ " errors, see details below.");
this.defaultShowErrors();
   }
})

jquery.validate使用 - 自定义错误信息的更多相关文章

  1. jQuery.validate.js 自定义错误信息

    var validate = $("form").validate({....})validate.showError({"username":"us ...

  2. jquery.validate.js默认配置,jquery.validate.js自定义提示信息

    jquery.validate.js默认配置,jquery.validate.js自定义提示信息 配置jQuery.validator默认的处理方法 >>>>>>& ...

  3. SpringBoot自定义错误信息,SpringBoot适配Ajax请求

    SpringBoot自定义错误信息,SpringBoot自定义异常处理类, SpringBoot异常结果处理适配页面及Ajax请求, SpringBoot适配Ajax请求 ============== ...

  4. 自定义错误信息并写入到Elmah

    在ap.net Web项目中一直使用Elmah进行日志记录, 但一直有一个问题困扰我很久,那就是我如何自己生成一个错误并记录到Elmah里去. 你知道有时你需要在项目中生成一个错误用于一些特殊的需求 ...

  5. 自定义 ocelot 中间件输出自定义错误信息

    自定义 ocelot 中间件输出自定义错误信息 Intro ocelot 中默认的 Response 中间件在出错的时候只会设置 StatusCode 没有具体的信息,想要展示自己定义的错误信息的时候 ...

  6. jQuery Validate自定义错误信息,自定义方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jquery.validate使用 - 自定义验证方法

    自定义jquery-validate的验证行为 1: 自定义表单提交 设置submitHandler来自定义表单提交动作 $(".selector").validate({    ...

  8. 清空jQuery validation 显示的错误信息

    现在做个BS结构的查询系统,登陆的时候添加个重置的按钮. 他的功能主要是: 1.清空Input的text 2.jQuery validation插件当错误的时候显示的信息,解决方法如下面的代码 var ...

  9. JQuery Validate验证显示错误提示位置

    验证多个Name值相同的元素: $(".send").click(function () { var a = 0; var b = 0; var c = 0; var d = 0; ...

随机推荐

  1. ASP.NET corrupt assembly “Could not load file or assembly App_Web_*

    以下是从overFlow 复制过来的问题 I've read through many of the other questions posted on the same issue, but I s ...

  2. UNDER THE HOOD OF THE NEW AZURE PORTAL

    http://jbeckwith.com/2014/09/20/how-the-azure-portal-works/ So - I haven’t been doing much blogging ...

  3. JS限制input输入的为数字并且有小数的时候最多保留两位小数

    JS限制input用户输入的为数字并且有小数的时候最多保留两位小数,代码如下: html部分: <input type="number" onkeypress="r ...

  4. IE or Chrome can not use localhost, firefox can works.

    因为服务器开启'localhost:9999",使用IE无法登陆,firefox下正常. 遂查看cookie,果然没有写入. stackoverflow.com: "ie enab ...

  5. Ubuntu16.04配置phpmyadmin

    原文 如何安装phpmyadmin-Mysql 数据库管理 使用界面管理器:系统->系统管理->新立得软件包管理器->搜索 phpmyadmin->右键标记安装.或直接使用一条 ...

  6. C++动态加载DLL调用方法

    一.构建DLL路径 char szTmp[_MAX_PATH]; char* szPath = getcwd(szTmp, _MAX_PATH);//获取当前工作目录  //构建dll路径  strc ...

  7. C++之路进阶——codevs1789(最大获利)

    1789 最大获利 2006年NOI全国竞赛  时间限制: 2 s  空间限制: 128000 KB  题目等级 : 大师 Master       题目描述 Description 新的技术正冲击着 ...

  8. LCD接口(转载)

    LCD接口分类 1.   I8080接口,我觉得应该就是所谓的8080,通常会用在12864屏上面,且有内部sdram,不需要实时的刷新图片,速度有限制, 支持的数据宽度有8/9/16/18bit,接 ...

  9. QuickRun-快速运行助手

    大家平时需要打开软件的时候都是怎么操作的?一般来说有三种方式: 切换到桌面再点击软件的快捷方式(会将当前正在操作的软件隐藏,再切换回之前的状态比较麻烦,特别是桌面被密密麻麻的图标铺满的时候,找到一个快 ...

  10. SQLServer游标(Cursor) (B)

    游标(Cursor)是处理数据的一种方法,为了查看或者处理结果集中的数据,游标提供了在结果集中一次以行或者多行前进或向后浏览数据的能力.我们可以把游标当作一个指针,它可以指定结果中的任何位置,然后允许 ...