jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
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校验解决方案的更多相关文章
- jquery.validate.js默认配置,jquery.validate.js自定义提示信息
jquery.validate.js默认配置,jquery.validate.js自定义提示信息 配置jQuery.validator默认的处理方法 >>>>>>& ...
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- jquery.validate.js表单验证 jquery.validate.js的用法
jquery.validate.js这个插件已经用了2年多了,是一个不可多得的表单验证最方便快捷的插件.基于jquery的小插件,基本小白一学就会上手,对于项目表单页面比较多,元素比较多的校验,该插件 ...
- Jquery客户端校验——jquery.validate.js
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- jQuery插件之验证控件jquery.validate.js
今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- jquery.validate.js插件使用
jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...
- jQuery表单验证插件——jquery.validate.js
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...
随机推荐
- CF_91B
题目意思是这样的:给定n个整数,求第i个数右边的距离它最远的比它小的数的下标之差然后再减1. 这里既然是需要知道距离该数最远的下标,可以从右至左扫描一遍,然后按照单调递减的顺序入栈,即只把比栈顶元素小 ...
- SPRING IN ACTION 第4版笔记-第二章-002-@ComponentScan、@Autowired的用法
一.@ComponentScan 1. @Configuration //说明此类是配置文件 @ComponentScan //开启扫描,会扫描当前类的包及其子包 public class CDPla ...
- java实现栈的数据结构
栈是一种数据结构,只能从一端进行存储和访问.常规操作有压入栈和弹出栈. 特性:先进先出,LIFO 以下是用ArrayList为内核实现一个栈的数据结构 import java.util.ArrayLi ...
- applicationDefaultJvmArgs:
server.context-path=/HelloMultiServlet server.port=8080 applicationDefaultJvmArgs: [ "-agentlib ...
- 【Java基础01】Java InputStream的read方法
JDK关于InputStream中的read方法的描述: (1) read() : 从输入流中读取数据的下一个字节,返回0到255范围内的int字节值.如果因为已经到达流末尾而没有可用的字节,则返回 ...
- pcDuino安装vnc进行远程控制
准备工作: 已经刷好的 pcduino : 点此购买 可选用显示器或者用ssh连接,ssh连接参考 无显示器刷机与使用 1.安装x11vnc 输入下面的命令: sudo apt-get insta ...
- SharePoint 2010中使用Visual Studio 2010进行方便快速的Web Part开发
转:http://www.cnblogs.com/fatwhale/archive/2010/02/24/1672633.html 在Visual Studio 2010中, 已经集成了用于Shar ...
- CentOS升级Python的方法
centOS内核版本为:3.10.101-1.el6.elrepo.x86_64 1,下载Python安装包 wget http://www.python.org/ftp/python/2.7.6/P ...
- js前台与后台数据交互-前台调后台
转自:http://blog.csdn.net/wang379275614/article/details/17033981 网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数 ...
- VS发布,TFS邮件设置截图
vs2012发布截图: TFS邮件设置截图: