FrontEnd 步步高升:bootstrap3-validation.js 必填项星号(*)显示方式修改
2015-02-26 22:57
330 查看
作者的GITHUB:https://github.com/mrlong/bootstrap3-validation.js,先感谢一下,很好用~
作者的样式,当表单有类为:form-horizontal 时,必填项*号显示样式很奇怪~~
作者垂直表单添加 * 源码如下:
看了注释之后,DOM树变成了:
span在那个地方是因为,作者的input外面有一层DIV,而当我缩小浏览器后,* 就不就了.........而且个人感觉*显示在label旁更合理吧...
所以我改成了:
此时的dom树:
作者的样式,当表单有类为:form-horizontal 时,必填项*号显示样式很奇怪~~
作者垂直表单添加 * 源码如下:
else if(fform_style==2){ $(obj).find('input, textarea').each(function(){ var el = $(this); var controlGroup = el.parents('.form-group'); controlGroup.removeClass('has-error has-success'); controlGroup.find("#valierr").remove(); valid = (el.attr('check-type')==undefined)?null:el.attr('check-type').split(' '); if (valid){ if ($.inArray('required',valid)>=0){ el.parent().after('<span class="help-block" id="valierr" style="color:#FF9966">*</span>'); <pre name="code" class="javascript"> //在这里我们就能看到,是在input的父类的后面增加类 * 的span} }; }); };
看了注释之后,DOM树变成了:
<div role="presentation" class="nodeBox textNodeBox "><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget "><<span class="nodeTag ">label</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">col-sm-2 control-label</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">for</span>="<span class="nodeValue editable ">mail</span>"</span><span class="nodeBracket editable insertBefore ">></span><span class="nodeText editable "><span class=" ">Email</span></span></<span class="nodeTag ">label</span>></span></div></div><div role="presentation" class="nodeBox containerNodeBox open"><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget "><<span class="nodeTag ">div</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">col-sm-6</span>"</span><span class="nodeBracket editable insertBefore ">></span></span></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox emptyNodeBox "><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget "><<span class="nodeTag ">input</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">id</span>="<span class="nodeValue editable ">mail</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">form-control</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">type</span>="<span class="nodeValue editable ">text</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">check-type</span>="<span class="nodeValue editable ">mail required</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">placeholder</span>="<span class="nodeValue editable ">xxxx@qq.com</span>"</span><span class="nodeBracket editable insertBefore ">></span></span></div></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget "></<span class="nodeTag ">div</span>></span></div></div><div role="presentation" class="nodeBox textNodeBox "><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget "><<span class="nodeTag ">span</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">id</span>="<span class="nodeValue editable ">valierr</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">help-block</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">style</span>="<span class="nodeValue editable ">color:#FF9966</span>"</span><span class="nodeBracket editable insertBefore ">></span><span class="nodeText editable "><span class=" ">*</span></span></<span class="nodeTag ">span</span>></span></div></div>
span在那个地方是因为,作者的input外面有一层DIV,而当我缩小浏览器后,* 就不就了.........而且个人感觉*显示在label旁更合理吧...
所以我改成了:
el.parent().siblings("label").append('<span id="valierr" style="color:#FF9966">*</span>');只用找控制input宽度的父类div的兄弟label元素里增加*span就OK
此时的dom树:
<span role="treeitem" class="nodeLabelBox repTarget "><<span class="nodeTag ">label</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">col-md-12 col-sm-12</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">for</span>="<span class="nodeValue editable ">username</span>"</span><span class="nodeBracket editable insertBefore ">></span></span><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox "><span class="nodeText editable "><span class=" ">用户名</span></span></div><div role="presentation" class="nodeBox textNodeBox "><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget "><<span class="nodeTag ">span</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">id</span>="<span class="nodeValue editable ">valierr</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">style</span>="<span class="nodeValue editable ">color:#FF9966</span>"</span><span class="nodeBracket editable insertBefore ">></span><span class="nodeText editable "><span class=" ">*</span></span></<span class="nodeTag ">span</span>></span></div></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget "></<span class="nodeTag ">label</span>></span></div><div role="presentation" class="nodeBox containerNodeBox open"><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget "><<span class="nodeTag ">div</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">col-md-6 col-sm-6</span>"</span><span class="nodeBracket editable insertBefore ">></span></span></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox emptyNodeBox "><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget "><<span class="nodeTag ">input</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">id</span>="<span class="nodeValue editable ">username</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">form-control</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">type</span>="<span class="nodeValue editable ">text</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">required-message</span>="<span class="nodeValue editable ">请输入用户名...</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">maxlength</span>="<span class="nodeValue editable ">20</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">minlength</span>="<span class="nodeValue editable ">6</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">check-type</span>="<span class="nodeValue editable ">required</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">placeholder</span>="<span class="nodeValue editable ">用户名</span>"</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">name</span>="<span class="nodeValue editable ">username</span>"</span><span class="nodeBracket editable insertBefore ">></span></span></div></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget "></<span class="nodeTag ">div</span>></span></div></div>
相关文章推荐
- linux显示方式的修改
- 修改MOSS内容查询WEBPART的默认显示方式
- 应用层调用接口修改输出显示方式 ExtEscape
- js显示时间 js显示最后修改时间
- 修改android应用程序横屏竖屏显示方式
- 修改ppt另存为网页的mht文件内容,更改其显示方式
- Silverlight中通过WCF方式传递数据 修改服务器端类的属性Silverlight中无法显示该属性
- 通过JS修改Gridpanel中的前台显示(Extjs)
- 通过JS修改Gridpanel中的前台显示(Extjs)
- JS文件默认编码方式及修改
- JS默认编码方式以及MyEclipse的修改
- 在地址栏运行js命令,既不弹出提示也不显示函数返回值的方式
- 修改建立DSO时的显示方式
- 一个流行且实用的JS表单验证提示,演示了怎么自定义错误信息的显示方式,同时通过写FormValid.showError类方法来实现错误显示方式自定义: errMsg 是一个错误消息的数组,这样方便自定
- 修改MOSS内容查询WebPart的默认显示方式
- 修改BCGCONTROLBAR向导生成的多文档程序默认是MDIChildWnd的MDI_TAB显示方式.
- js修改image并显示
- 文档保存和修改: 如何在试图的标题中显示一个“修改过”的指示符 星号*,与某个“修改过”的文档关联?