Bootstrap: Validation states with form-inline fields? -


is there way use bootstrap's form field validation states/classes (warning, error, info, success) on form-inline fields (without using control-group)?

i'm using bootstrap, , have large form uses form-horizontal class layout. however, there areas within form fields need inline (for example, city/state/zip). i'm using form-inline this, works fine. here's basic markup:

<form id="account-form" class="form-horizontal" method="post" action="" novalidate>     <!-- address -->     <div class="control-group">         <label class="control-label">address</label>          <div class="controls">             <input type="text" name="address" />         </div>     </div>      <!-- city, state, zip -->     <div class="control-group">         <label class="control-label">city</label>          <div class="controls form-inline">             <input type="text" name="city" />              <label>state</label>             <input type="text" name="state" />              <label>zip code</label>             <input type="text" name="zipcode" />         </div>     </div> </form>

in particular situation need handle validation manually. unfortunately, seems bootstrap's validation state classes must applied control-group; can see in example above, control-group in case contains multiple fields. tried wrapping individual fields within control-group spans or divs, control-group not play nicely @ when used both form-inline , form-horizontal together!

is there css class or other rule can attach field directly (or otherwise-innocent field wrapper) apply these styles individual fields, without having redeclare standard bootstrap styles??

you create custom less code , recompile bootstrap:

add @import "_custom.less"; less/bootstrap.less

create less/_custom.less:

// mixin inline form field states .inlineformfieldstate(@warning: success,@textcolor: #555, @bordercolor: #ccc, @backgroundcolor: #f5f5f5) {   // set text color   label.@{warning},   .help-block .@{warning},   .help-inline .@{warning}{     color: @textcolor;   }   // style inputs accordingly   .checkbox .@{warning},   .radio .@{warning},   input.@{warning},   select.@{warning},   textarea.@{warning} {     color: @textcolor;   }   input.@{warning},   select.@{warning},   textarea.@{warning} {     border-color: @bordercolor;     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // redeclare transitions work     &:focus {       border-color: darken(@bordercolor, 10%);       @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@bordercolor, 20%);       .box-shadow(@shadow);     }   }   // give small background color input-prepend/-append   .input-prepend .add-on .@{warning},   .input-append .add-on .@{warning} {     color: @textcolor;     background-color: @backgroundcolor;     border-color: @textcolor;   } }  .form-inline{   .inlineformfieldstate(success, @successtext, @successtext, @successbackground);   .inlineformfieldstate(warning, @warningtext, @warningtext, @warningbackground);   .inlineformfieldstate(info, @infotext, @infotext, @infobackground);   .inlineformfieldstate(error, @errortext, @errortext, @errorbackground); }

this mixin based on .formfieldstate in less/mixins.less. after recompile bootstrap use (see also: http://jsfiddle.net/bassjobsen/k3re3/):

<form> <div class="container">    <div class="control-group">         <div class="controls form-inline">             <label class="error">city</label>             <input class="error" type="text" name="city" />             <label class="warning">state</label>             <input class="warning" type="text" name="state" />             <label class="success">zip code</label>             <input class="success" type="text" name="zipcode" />             <label class="info">street</label>             <input class="info" type="text" name="street" />         </div> </div> </div> </form>

Comments

Post a Comment

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

Image
given ax = plt.subplot() : ax.bar()[0] can passed plt.legend() . however, ax.bar3d() returns none . how create legend displayed bars? update: passing legend="stuff" ax.bar3d() , calling ax.legend() raises /usr/lib/python2.6/site-packages/matplotlib/axes.py:4368: userwarning: no labeled objects found. use label='...' kwarg on individual plots. warnings.warn("no labeled objects found. " you need use proxy artist legends not supported. this code: from mpl_toolkits.mplot3d import axes3d import matplotlib.pyplot plt import numpy np fig = plt.figure() ax = fig.add_subplot(111, projection='3d') x, y = np.random.rand(2, 100) * 4 hist, xedges, yedges = np.histogram2d(x, y, bins=4) elements = (len(xedges) - 1) * (len(yedges) - 1) xpos, ypos = np.meshgrid(xedges[:-1]+0.25, yedges[:-1]+0.25) xpos = xpos.flatten() ypos = ypos.flatten() zpos = np.zeros(elements) dx = 0.5 * np.ones_like(zpos) dy = dx.copy() dz = hist.flatten() ax...
Read more

java - Multi-Label Document Classification -

i have database in store data based upon following 3 fields: id, text, {labels}. note each text has been assigned more 1 label \ tag \ class. want build model (weka \ rapidminer \ mahout) able recommend \ classify bunch of labels \ tags \ classes given text. i have heard svm , naive bayes classifier, not sure whether support multi-label classification or not. guides me right direction more welcome! the basic multilabel classification method one-vs.-the-rest (ovr), called binary relevance (br). basic idea take off-the-shelf binary classifier, such naive bayes or svm, create k instances of solve k independent classification problems. in python-like pseudocode: for each class k: learner = svm(settings) # example labels = [class_of(x) == k x in samples] learner.learn(samples, labels) then @ prediction time, run each of binary classifiers on sample , collect labels predict positive. (both training , prediction can done in parallel, since problems assumed ...
Read more

php - Dynamic url re-writing using htaccess -

how can rewrite http://mydomain.com/test/master.php?catid=2&subcatid=8 http://mydomain.com/test/master.php/catname/subcat using .htaccess file. once rewritten, how can access these parameters in master.php? note: untested, let me know if doesn't work. rewriterule ^master.php/([a-za-z0-9_-]+)/([a-za-z0-9_-]+)$ /master.php?catid$1&subcatid=$2 [l]
Read more