Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The thing here is that without using jQuery you cannot access easily the wrapping div around you <code>Ember.TextField</code>'s. Also worth mentioning is that there might be also a hundred ways of doing this, but the simplest solution I can think of would be to create a simple <code>Ember.View</code> as a wrapper and check the underlying child views for validity.</p> <h3>Template</h3> <pre><code>{{#view App.ControlGroupView}} {{view App.AlphaNumField valueBinding="value" type="text" classNames="inputField" placeholder="Alpha num value"}} {{/view}} </code></pre> <h3>Javascript</h3> <pre><code>App.ControlGroupView = Ember.View.extend({ classNameBindings: 'isValid:control-group:control-group-error', isValid: function () { var validFields = this.get('childViews').filterProperty('isValid', true); var valid = validFields.get('length'); var total = this.get('childViews').get('length') return (valid === total); }.property('childViews.@each.isValid') }); App.AlphaNumField = Ember.TextField.extend({ isValid: function () { return /^[a-z0-9]+$/i.test(this.get('value')); }.property('value') }); </code></pre> <h3>CSS</h3> <pre><code>.control-group-error { border:1px solid red; padding:5px; } .control-group { border:1px solid green; padding:5px; } </code></pre> <p>Working <a href="http://jsfiddle.net/4ZyBM/9/" rel="nofollow">demo</a>.</p> <p>Regarding bootstrap-ember integration and for the sake of DRY your could also checkout this ember-addon: <a href="https://github.com/emberjs-addons/ember-bootstrap" rel="nofollow">https://github.com/emberjs-addons/ember-bootstrap</a></p> <p>Hope it helps.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload