Ember Validations + Semantic UI Validations

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'],
    		}
		});
}

}

1 Like