FrontEnd: Bootstrap3-validation.js required asterisk (*) display mode modification

The author's github:https://github.com/mrlong/bootstrap3-validation.js, thank you first, very useful ~

The author's style, when the form has the class:form-horizontal , the required fields * Number display style is very strange ~ ~

Author Vertical form Add * source code as follows:

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" >                        //Here we can see that is to add a span of class * After the parent of input

} }; }); };

After reading the comments, the DOM tree becomes:

<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 is in that place because the author's input has a layer of div, and when I zoom out of the browser, * It's not ... and personal feeling * displayed next to the label more reasonable ...

So I changed it:

El.parent (). Siblings ("label"). Append (' <span id= ' valierr "style=" color: #FF9966 ">*</span>");

Add *span to the sibling label element of the parent div that controls the input width only.
The DOM tree at this point:

<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= "" > User name </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" > Please enter user name ...</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" > User name &LT;/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>

FrontEnd: Bootstrap3-validation.js required asterisk (*) display mode modification