set 'didValidate' true only for selected fields
rinoldsimon opened this issue · comments
Environment
- Ember Version: 2.0
- Ember CLI Version: 2.13.0
- Ember CP Validations Version: 3.4.0
Steps to Reproduce
hbs:
<div>
<label> Email: <label>
{{validated-input model=this placeholder="Enter new email" valuePath='new_email' id="new_email" didValidate=didValidate}}
<label> Password: <label>
{{validated-input model=this placeholder="Enter current password" valuePath='current_password' id="current_password" didValidate=didValidate}}
<button {{action "changeEmail"}}>Submit</button>
</div>
<div>
<label> Confirmation Token: <label>
{{validated-input model=this placeholder="Enter confirmation token" valuePath='confirmation_token' id="confirmation_token" didValidate=didValidate}}
<button {{action "verify"}}>Verify</button>
</div>
js:
import Ember from 'ember';
import { validator, buildValidations } from 'ember-cp-validations';
const Validations = buildValidations({
new_email: [
validator('presence', true),
validator('format', { type: 'email' })
],
current_password: [
validator('presence', true)
],
confirmation_token: [
validator('presence', true),
]
});
export default Ember.Component.extend(Validations, {
changeEmail: function() {
this.validate().then(() => {
if (this.get('validations.attrs.new_email.isValid') && this.get('validations.attrs.current_password.isValid')) {
...
....
} else {
this.set('didValidate', true);
}
});
});
Now when I click submit, changeEmail action is called and if validation fails it sets this.set('didValidate', true); which enables all the three validated-input field and shows validation error for even confirmation_token field. But i need to show validation error message only for current_password and new_email. vice versa when verify action is called
one way of doing is, unique property name for didValidate
For eg:
<div>
<label> Email: <label>
{{validated-input model=this placeholder="Enter new email" valuePath='new_email' id="new_email" didValidate=didValidateEmail}}
<label> Password: <label>
{{validated-input model=this placeholder="Enter current password" valuePath='current_password' id="current_password" didValidate=didValidatePassword}}
<button {{action "changeEmail"}}>Submit</button>
</div>
<div>
<label> Confirmation Token: <label>
{{validated-input model=this placeholder="Enter confirmation token" valuePath='confirmation_token' id="confirmation_token" didValidate=didValidateToken}}
<button {{action "verify"}}>Verify</button>
</div>
and in js set the property to true or false manually for each field:
changeEmail: function() {
this.validate().then(() => {
if (this.get('validations.attrs.new_email.isValid') && this.get('validations.attrs.current_password.isValid')) {
...
....
} else {
this.setProperties({didValidateEmail: true, didValidatePassword: true});
}
});
Is this the only way ?