title: Form Validations in EmberJS
body: <p>I'm just wondering what the general pattern for validating forms in EmberJS? For my App.IndexView I have a form and when you click the submit button the target set to the view so I can do some validation.  This works great up to the point where I need to do something with the fields that have errors.  I would like to just add a class to the fields with errors but not really sure how to do it.  Should the IndexView validate the form or should I create a view for each field that validates its self on blur?  Below is what I have in my IndexView.</p>
  
  <pre><code>App.IndexView = Ember.View.extend
  
  
    create: (model) -&gt;
  
      valid = @_validate model
  
      if valid is true
        @get('controller').send 'createUser'
      else
        # HANDLE THE FIELDS WITH ERRORS
  
    _validate: (model) -&gt;
  
      invalid = []
      validations = {
        firstName: @_validateString model.get 'firstName'
        lastName: @_validateString model.get 'lastName'
        email: @_validateEmail model.get 'email'
        password: @_validatePassword model.get 'password'
        accountType: @_validateString model.get 'accountType'
      }
  
      # This will get all of the values then runs uniq to see if the
      # form is valid
      validForm = _.chain(validations).values().uniq().value()
  
      if validForm.length is 1 and validForm[0]
        true
      else
        # other wise build up an array of the fields with issues
        for field, val of validations
          if val is false
            invalid.push field
  
        invalid
  
    _validateString: (str) -&gt;
      return false unless str
      if str isnt '' then true else false
  
    _validateEmail: (str) -&gt;
      pattern = /^(([^&lt;&gt;()[\]\\.,;:\s@\"]+(\.[^&lt;&gt;()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      pattern.test str
  
    _validatePassword: (str) -&gt;
      return false unless str
      if str.length &gt;= 6 then true else false
  </code></pre>
  
  <p>and the template</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="span12"&gt;
      &lt;div class="signup"&gt;
        &lt;form class="form-horizontal offset3"&gt;
          &lt;div class="control-group"&gt;
            &lt;label class="control-label" for="first_name"&gt;First Name&lt;/label&gt;
            &lt;div class="controls"&gt;
              {{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}}
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
            &lt;label class="control-label" for="last_name"&gt;Last Name&lt;/label&gt;
            &lt;div class="controls"&gt;
              {{ view Ember.TextField placeholder="Last Name" required="true" valueBinding='lastName' name='last_name' viewName='lastNameField'}}
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
            &lt;label class="control-label" for="email"&gt;Email&lt;/label&gt;
            &lt;div class="controls"&gt;
              {{ view Ember.TextField placeholder="Email" required="true" type="email" valueBinding='email' name='email' viewName='emailField'}}
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
            &lt;label class="control-label" for="password"&gt;Password&lt;/label&gt;
            &lt;div class="controls"&gt;
              {{ view Ember.TextField placeholder="Password" required="true" type="password" valueBinding='password' name='password' viewName='passwordField'}}
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
            &lt;label class="control-label" for=""&gt;Account Type&lt;/label&gt;
            &lt;div class="controls"&gt;
              {{#view Ember.RadioButtonGroup name="accountType" required="true" valueBinding="accountType"}}
                &lt;label class="radio"&gt;
                  {{view RadioButton checked='false' value="landlord"}}
                  Landlord
                &lt;/label&gt;
                &lt;label class="radio"&gt;
                  {{view RadioButton checked='false' required="true" value="tenant"}}
                  Tenant
                &lt;/label&gt;
              {{/view}}
            &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
  
            &lt;div class="controls"&gt;
              &lt;input class="btn btn-primary" {{action create model target='view' }} type="submit" value="Sign Up"&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/form&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>