FrontEnd 步步高昇:bootstrap3-validation.js 必填項星號(*)顯示方式修改

作者的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 ">[email protected]</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>