EmberJSでのフォーム検証

Question

EmberJSでフォームを検証するための一般的なパターンは何ですか？私のApp.IndexViewの場合、私はフォームを持っているので、いくつかの検証を行うことができるように、送信ボタンをクリックするとターゲットがビューに設定されます。これは、エラーのあるフィールドを使って何かをする必要があるところまでうまくいきます。私はエラーのあるフィールドにクラスを追加するだけですが、実際にそれを行う方法はわかりません。インデックスビューはフォームを検証する必要がありますか？または、ぼかしでセルフを検証するフィールドごとにビューを作成する必要がありますか？以下は、私がIndexViewで持っているものです。

App.IndexView = Ember.View.extend 


    create: (model) -> 

    valid = @_validate model 

    if valid is true 
     @get('controller').send 'createUser' 
    else 
     # HANDLE THE FIELDS WITH ERRORS 

    _validate: (model) -> 

    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) -> 
    return false unless str 
    if str isnt '' then true else false 

    _validateEmail: (str) -> 
    pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\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) -> 
    return false unless str 
    if str.length >= 6 then true else false 

とテンプレート

<div class="row"> 
    <div class="span12"> 
    <div class="signup"> 
     <form class="form-horizontal offset3"> 
     <div class="control-group"> 
      <label class="control-label" for="first_name">First Name</label> 
      <div class="controls"> 
      {{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}} 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="last_name">Last Name</label> 
      <div class="controls"> 
      {{ view Ember.TextField placeholder="Last Name" required="true" valueBinding='lastName' name='last_name' viewName='lastNameField'}} 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="email">Email</label> 
      <div class="controls"> 
      {{ view Ember.TextField placeholder="Email" required="true" type="email" valueBinding='email' name='email' viewName='emailField'}} 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="password">Password</label> 
      <div class="controls"> 
      {{ view Ember.TextField placeholder="Password" required="true" type="password" valueBinding='password' name='password' viewName='passwordField'}} 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="">Account Type</label> 
      <div class="controls"> 
      {{#view Ember.RadioButtonGroup name="accountType" required="true" valueBinding="accountType"}} 
       <label class="radio"> 
       {{view RadioButton checked='false' value="landlord"}} 
       Landlord 
       </label> 
       <label class="radio"> 
       {{view RadioButton checked='false' required="true" value="tenant"}} 
       Tenant 
       </label> 
      {{/view}} 
      </div> 

     </div> 
     <div class="control-group"> 

      <div class="controls"> 
      <input class="btn btn-primary" {{action create model target='view' }} type="submit" value="Sign Up"> 
      </div> 

     </div> 
     </form> 

    </div> 

    </div> 

</div> 

Answer 1

私はちょうどEmberJSでフォームを検証するためのどのような一般的なパターンを思ったんだけど？

使用中のパターンが複数あるようです。それは、ビジネスロジックを可能な限りビューレイヤから遠くに保つという一般的な戦略で、検証対象となるものにかなり依存しています。ここで有用であろういくつかのリンクは、次のとおりビューがときに、フォーカスが変更検証をトリガするために使用されていると

• validations-in-emberjs-application.htmlは、コントローラレベルで検証を行うことをお勧めします。このスクリーンキャストは、このパターンを使用して単純なフォームフィールドを検証する方法を示しています。

• Asynchronous-Form-Field-Validation-With-Emberは、ビューレイヤーで簡単な検証を実行するために使用できる再利用可能なコンポーネントをいくつか提供します。

• ember-validations

  は、私は、フォームを持っている私のApp.IndexViewのために、任意の燃えさしオブジェクト

にアクティブレコード様式の検証機能を追加するために使用され、あなたがクリックしたときに提出することができるライブラリです私はいくつかの検証を行うことができますので、ターゲットにビューを設定します。これは、エラーのあるフィールドを使って何かをする必要があるところまでうまくいきます。私はちょうどerroの分野にクラスを追加したいが、本当にそれを行う方法はわからない。

これは、多数のフィールドを一度に検証しようとしているため、この検証ロジックをコントローラに移動する方が意味があるためです。

<div class="controls" {{bindAttr class=firstNameError:error:success}}> 
    {{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}} 
</div> 

だから、これで所定の位置にあなたの検証の結果に応じて、真/偽を返すfirstNameErrorプロパティを追加します。いずれかの方法で、一般的に次のようにクラスがプロパティに指定されたフィールドの属性を結合するであろう。実装を考えると、_validateが実行されたときにこのプロパティを設定するのが理にかなっていますが、リアルタイムで検証を実行する計算プロパティである可能性もあります。

フォームを検証する必要がありますか？または、ぼかしのセルフを検証するフィールドごとにビューを作成する必要がありますか？

これは本当にあなたがユーザーエクスペリエンスをどのようにしたいかによって異なります。 FWIW私の投票は、ぼやけて行くことです。