Formulaire de validation dans EmberJS
Je me demandais simplement ce que le modèle général pour la validation des formulaires dans EmberJS? Pour mon Application.IndexView j'ai un formulaire et lorsque vous cliquez sur le bouton soumettre l'objectif fixé à la vue afin que je puisse faire la validation de certains. Cela fonctionne très bien jusqu'au moment où j'ai besoin de faire quelque chose avec les champs qui ont des erreurs. Je voudrais juste ajouter une classe pour les champs avec des erreurs, mais pas vraiment sûr de savoir comment faire. Si le IndexView valider le formulaire ou devrais-je créer une vue pour chaque champ qui valide son auto sur le flou? Ci-dessous est ce que j'ai dans mon 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
et le modèle
<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>
source d'informationauteur Chad | 2013-01-30
Vous devez vous connecter pour publier un commentaire.
Il semble y avoir plusieurs modèles en cours d'utilisation. Ça dépend un peu sur ce qui est en cours de validation, avec la stratégie générale étant de garder la logique des affaires loin de la couche de la vue que possible. Voici quelques liens qui peuvent s'avérer utiles:
validations-in-emberjs-application.html vous recommande d'effectuer la validation au niveau du contrôleur, avec des vues sont utilisés pour déclencher la validation lors du changement de focus. Cette vidéo montre comment ce modèle peut être utilisé pour valider un peu de forme simple-champs.
Asynchrone Champ De Formulaire De Validation-Avec-Braise fournit quelques composants réutilisables qui peuvent être utilisés pour effectuer de simples validations à la couche vue.
braise-validations est une bibliothèque qui peut être utilisée pour ajouter des actifs du record de style de validation des capacités à toute braise-objet
puisque vous êtes à la recherche pour valider un certain nombre de domaines à la fois, il pourrait faire plus de sens pour déplacer cette logique de validation dans le contrôleur. De toute façon, en règle générale, vous lier les attributs de classe pour un champ donné, à une propriété comme suit:
Donc, avec cela à la place d'ajouter un
firstNameError
propriété qui renvoie vrai ou faux selon les résultats de votre validation. Compte tenu de votre mise en œuvre, il serait probablement bon de définir cette propriété lors de la_validate
est exécuté, mais il pourrait aussi être une propriété calculée qui effectue une validation en temps réel.Cela dépend vraiment de ce que vous voulez l'expérience de l'utilisateur. FWIW mon vote est pour aller avec sur-flou.