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. MVVM_Android-CleanArchitecture

    前言 "Architecture is About Intent, not Frameworks" - Robert C. Martin (Uncle Bob) Uncle Bob ...

  2. 合并 ios 静态库

    合并 cordovaLib库: lipo -create 'Release-iphoneos/libCordova.a' "Release-iphonesimulator/libCordov ...

  3. LiBsvm用于多分类时训练模型参数含义

    The 'svmtrain' function returns a model which can be used for futureprediction.  It is a structure a ...

  4. 无法自动调试 未能调试远程过程。这通常说明未在服务器上启用调试 WCF 托管在IIS上

    解决方案,把新建的网站的app.config修改下配置 <system.web> <!-- 设置 compilation debug="true" 可将调试符号插 ...

  5. git推送本地分支到远端 以及删除远端分支的 命令

    git推送本地分支到远端 当前处于master分支,尝试用了git push origin warning: push.default is unset; its implicit value is ...

  6. Vijos_1218_数字游戏_(划分型动态规划+环状动态规划)

    描述 https://vijos.org/p/1218 给出n个数围成一个环,将其划分成k个部分,每个部分求和再对10取模,最后将每个部分的值相乘,求其最大值与最小值. 描述 丁丁最近沉迷于一个数字游 ...

  7. POJ_3176_Cow_Bowling_(数字三角形)_(动态规划)

    描述 http://poj.org/problem?id=3176 给出一个三角形,每个点可以走到它下面两个点,将所有经过的点的值加起来,问最大的和是多少. Cow Bowling Time Limi ...

  8. 【转】Mac OS X 快捷键(完整篇)

    原文网址:http://www.nooidea.com/2011/01/mac-os-x-keyboard-shortcuts.html 没有写到基本的一些组合,只是一些可能大家不太常用到但及其提高机 ...

  9. Performance Counter的使用

    原文地址:http://blog.csdn.net/jiangxinyu/article/details/5480401 PerformanceCounter 基本介绍以及示例方法 一 Perform ...

  10. vijosP1687 细菌总数

    vijosP1687 细菌总数 链接:https://vijos.org/p/1687 [思路] 错排公式+高精度. 题目要求排列数目而且不能有Pi==i的情况出现,可以看出这正是1,2,3,4,5, ...