jquery.validate.js校验select2解决方案

Jquery插件select2校验解决方案

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2015年9月15日 11:25:26 星期二

http://fanshuyao.iteye.com/

为了用jquery.validate.js校验select2,折腾了2天,现在终于解决了,把方法告诉大家。

一、使用用了select2美化select

$('select').select2();

二、页面部分代码

<div class="form-group">
<label for="tel1" class="control-label">性别:</label>
<div>
<select name="genders" id="genders" class="form-control">
<option value="">请选择…</option>
<c:forEach items="${genders}" var="gender">
<option value="${gender}" ${userInSession.genders eq gender?"selected='selected'":""}>${gender.value}</option>
</c:forEach>
</select>
</div>
</div>

三、使用jquery.validate.js

导入js文件

jquery.validate.min.js

additional-methods.min.js

messages_zh.min.js

additional-methods-custom.js  (自己定义的校验方法扩展js文件)

四、校验

var validateObj = $('#userInfoEditForm').validate({
ignore: "",
errorClass : 'help-block',
focusInvalid : true,
rules : {
genders : {
required : true
}
},
messages : {
genders : {
required : "请选择性别"
}
submitHandler : function(form) {
return false;
form.submit();//form.submit(); 或者$(form).ajaxSubmit();
}
}); $("#genders").change(function(){
$(this).valid();
});

五、问题说明

1、使用select2美化select下拉列表后,select2会把原来的select隐藏掉,设置css属性(display:none),然后再通过select2重新定制界面

2、但jquery.validate.js默认不是校验:hidden属性的控件,所以造成原来的select校验不了

官网说明:

ignore (default: ":hidden")

Type: Selector

Elements to ignore when validating, simply filtering them out. jQuery's not-method is used, therefore everything that is accepted by not() can be passed as this option. Inputs of type submit and reset are always ignored, so are disabled elements.

Example: Ignores all elements with the class "ignore" when validating.

$("#myform").validate({

ignore: ".ignore"

});

3、解决方法就是加ignore属性,把值设置为""空字符串

ignore: "",

4、设置ignore后在提交时就会对隐藏的属性进行校验,但选择的时候没有进行实时校验,因为你选择的是select2。所以要给select加一个change事件,当改变时,再校验一次。

$("#genders").change(function(){
$(this).valid();
});

需要注意的是:valid方法是jquery.validate.js中的方法,所以用的时候,要先调用初始化方法validate( ),

然后在后面再重新调用valid()校验方法。

valid( )  可以校验整个表单,也可以校验单个属性。

官网说明:

valid( )

Returns: Boolean

Description: Checks whether the selected form is valid or whether all selected elements are valid.

validate() needs to be called on the form before checking it using this method.

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2015年9月15日 11:25:26 星期二

http://fanshuyao.iteye.com/

jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案的更多相关文章

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

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

  2. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  3. jquery.validate.js表单验证 jquery.validate.js的用法

    jquery.validate.js这个插件已经用了2年多了,是一个不可多得的表单验证最方便快捷的插件.基于jquery的小插件,基本小白一学就会上手,对于项目表单页面比较多,元素比较多的校验,该插件 ...

  4. Jquery客户端校验——jquery.validate.js

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  5. jQuery插件之验证控件jquery.validate.js

    今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...

  6. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  7. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  8. jquery.validate.js插件使用

    jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

  9. jQuery表单验证插件——jquery.validate.js

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...

随机推荐

  1. CF_91B

    题目意思是这样的:给定n个整数,求第i个数右边的距离它最远的比它小的数的下标之差然后再减1. 这里既然是需要知道距离该数最远的下标,可以从右至左扫描一遍,然后按照单调递减的顺序入栈,即只把比栈顶元素小 ...

  2. SPRING IN ACTION 第4版笔记-第二章-002-@ComponentScan、@Autowired的用法

    一.@ComponentScan 1. @Configuration //说明此类是配置文件 @ComponentScan //开启扫描,会扫描当前类的包及其子包 public class CDPla ...

  3. java实现栈的数据结构

    栈是一种数据结构,只能从一端进行存储和访问.常规操作有压入栈和弹出栈. 特性:先进先出,LIFO 以下是用ArrayList为内核实现一个栈的数据结构 import java.util.ArrayLi ...

  4. applicationDefaultJvmArgs:

    server.context-path=/HelloMultiServlet server.port=8080 applicationDefaultJvmArgs: [ "-agentlib ...

  5. 【Java基础01】Java InputStream的read方法

    JDK关于InputStream中的read方法的描述: (1) read() :  从输入流中读取数据的下一个字节,返回0到255范围内的int字节值.如果因为已经到达流末尾而没有可用的字节,则返回 ...

  6. pcDuino安装vnc进行远程控制

    准备工作: 已经刷好的 pcduino : 点此购买   可选用显示器或者用ssh连接,ssh连接参考 无显示器刷机与使用 1.安装x11vnc 输入下面的命令: sudo apt-get insta ...

  7. SharePoint 2010中使用Visual Studio 2010进行方便快速的Web Part开发

    转:http://www.cnblogs.com/fatwhale/archive/2010/02/24/1672633.html 在Visual Studio 2010中,  已经集成了用于Shar ...

  8. CentOS升级Python的方法

    centOS内核版本为:3.10.101-1.el6.elrepo.x86_64 1,下载Python安装包 wget http://www.python.org/ftp/python/2.7.6/P ...

  9. js前台与后台数据交互-前台调后台

    转自:http://blog.csdn.net/wang379275614/article/details/17033981   网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数 ...

  10. VS发布,TFS邮件设置截图

    vs2012发布截图: TFS邮件设置截图: