I am using SemanticUI, and it has its own validation mechanism.
How to use the two models (semantic ui validations and Ember Validations) together?
I wanted Ember Validation execute validations of Semantic UI doing so changes in the interface.
I am using SemanticUI, and it has its own validation mechanism.
How to use the two models (semantic ui validations and Ember Validations) together?
I wanted Ember Validation execute validations of Semantic UI doing so changes in the interface.
Create a components for that and use DidInsertElement in order to initialize the semantic components.
I extracted just the Semantic UI styles rather than using the whole thing as I found it clashing with the “Ember Way” too often.
Eventually I removed a lot of the Semantic UI css as well since it is actually very bloated unless you use every part.
Hi @joseperales,
In my case, I have a login-form component
const Validations = buildValidations({
email: [
validator('presence', true),
validator('format', { type: 'email' })
],
password: [
validator('presence', true),
validator('length', { min: 4, max: 10 })
]
});
export default Ember.Component.extend(Validations, {
isFormValid: Ember.computed.alias('validations.isValid'),
didInsertElement() {
this._super(...arguments);
this.$('form')
.form({
on: 'blur',
fields: {
email: ['empty', 'email'],
password: ['minLength[4]', 'maxLength[10]', 'empty'],
}
})
;
}
}
See I need to repeat the validations …
I would like to use semantic ui for validations together with the ember cp validations.
What do you recommend I do?
Hi @ridermansb With didRender() the magic happen
export default Ember.Component.extend(Validations, { isFormValid: Ember.computed.alias(‘validations.isValid’),
didInsertElement() {
this._super(...arguments);
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent); // To be sure that it happen
},
afterRenderEvent : function(){ //applied after
this.$('form')
.form({
on: 'blur',
fields: {
email: ['empty', 'email'],
password: ['minLength[4]', 'maxLength[10]', 'empty'],
}
});
},didRender() { // To be sure that the validations happen again
this._super(...arguments);
this.$('form')
.form({
on: 'blur',
fields: {
email: ['empty', 'email'],
password: ['minLength[4]', 'maxLength[10]', 'empty'],
}
});
}
}