FrontEnd 步步高升:bootstrap3-validation.js 必填项星号(*)显示方式修改

作者的GITHUB:https://github.com/mrlong/bootstrap3-validation.js,先感谢一下,很好用~作者的样式,当表单有类为:form-horizontal 时,必填项*号显示样式很奇怪~~作者垂直表单添加 * 源码如下:else if(fform_style==2){$(obj).

tragedyxd

8745人浏览 · 2015-02-26 22:57:03

tragedyxd · 2015-02-26 22:57:03 发布

作者的GITHUB:https://github.com/mrlong/bootstrap3-validation.js,先感谢一下,很好用~

作者的样式,当表单有类为: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>