# Ember Validations + Semantic UI Validations

**URL:** <https://discuss.emberjs.com/t/ember-validations-semantic-ui-validations/11415>\
**Category:** Uncategorized\
**Created:** [August 17, 2016, 1:33am UTC](https://discuss.emberjs.com/t/ember-validations-semantic-ui-validations/11415 "2016-08-17T01:33:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ridermansb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ridermansb/32/12391_2.png) [@ridermansb](https://discuss.emberjs.com/u/ridermansb)\
**Post date:** [August 17, 2016, 1:33am UTC](https://discuss.emberjs.com/t/ember-validations-semantic-ui-validations/11415/1 "2016-08-17T01:33:58Z")

</div>

I am using [SemanticUI](http://semantic-ui.com/behaviors/form.html#/usage), 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.

---

<div class="post-metadata">

**Author:** ![joseperales](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/joseperales/32/15317_2.png) [@joseperales](https://discuss.emberjs.com/u/joseperales)\
**Post date:** [August 17, 2016, 3:42am UTC](https://discuss.emberjs.com/t/ember-validations-semantic-ui-validations/11415/2 "2016-08-17T03:42:35Z")

</div>

Create a components for that and use DidInsertElement in order to initialize the semantic components.

---

<div class="post-metadata">

**Author:** ![ricky1981](https://avatars.discourse-cdn.com/v4/letter/r/f4b2a3/32.png) [@ricky1981](https://discuss.emberjs.com/u/ricky1981)\
**Post date:** [August 17, 2016, 6:48am UTC](https://discuss.emberjs.com/t/ember-validations-semantic-ui-validations/11415/3 "2016-08-17T06:48:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ridermansb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ridermansb/32/12391_2.png) [@ridermansb](https://discuss.emberjs.com/u/ridermansb)\
**Post date:** [August 19, 2016, 2:03pm UTC](https://discuss.emberjs.com/t/ember-validations-semantic-ui-validations/11415/4 "2016-08-19T14:03:56Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![joseperales](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/joseperales/32/15317_2.png) [@joseperales](https://discuss.emberjs.com/u/joseperales)\
**Post date:** [August 23, 2016, 5:38am UTC](https://discuss.emberjs.com/t/ember-validations-semantic-ui-validations/11415/5 "2016-08-23T05:38:39Z")

</div>

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

```

}