frontend validator apis

assets/javascripts/wizard/components/field-validators.js.es6

@@ -0,0 +1,9 @@
+import Component from "@ember/component";
+import { observes } from "discourse-common/utils/decorators";
+export default Component.extend({
+    actions:{
+        perform() {
+            this.toggleProperty('performValidation');
+        }
+    }
+});

assets/javascripts/wizard/components/validator.js.es6

@@ -0,0 +1,16 @@
+import Component from "@ember/component";
+import { not } from "@ember/object/computed";
+import { observes } from "discourse-common/utils/decorators";
+
+export default Component.extend({
+    classNameBindings: ['isValid', 'isInvalid'],
+    validMessageKey: null,
+    invalidMessageKey: null,
+    isValid: null,
+    isInvalid: not('isValid'),
+    layoutName: 'components/validator', // useful for sharing the template with extending components
+    @observes('perform')
+    performValidation() {
+      this.validate();
+    },
+});

assets/javascripts/wizard/templates/components/field-validators.hbs

@@ -0,0 +1,13 @@
+{{#if field.validations}}
+    {{#each field.validations.top as |validation|}}
+        {{validation.component field=field perform=perform}}
+    {{/each}}
+
+    {{yield (hash perform=(action 'perform')) }}
+
+    {{#each field.validations.bottom as |validation|}}
+        {{validation.component field=field perform=perform}}
+    {{/each}}
+{{else}}
+    {{yield}}
+{{/if}}

assets/javascripts/wizard/templates/components/validator.hbs

@@ -0,0 +1,5 @@
+{{#if isValid}}
+  {{i18n validMessageKey}}
+{{else}}  
+  {{i18n invalidMessageKey}}
+{{/if}}

assets/javascripts/wizard/templates/components/wizard-field.hbs

@@ -10,11 +10,13 @@
   <div class='field-description'>{{cookedDescription}}</div>
 {{/if}}
 
-{{#if inputComponentName}}
-  <div class='input-area'>
-    {{component inputComponentName field=field step=step fieldClass=fieldClass wizard=wizard}}
-  </div>
-{{/if}}
+{{#field-validators field=field as |validators|}}
+  {{#if inputComponentName}}
+    <div class='input-area'>
+      {{component inputComponentName field=field step=step fieldClass=fieldClass wizard=wizard focusOut=validators.perform}}
+    </div>
+  {{/if}}
+{{/field-validators}}
 
 {{#if field.char_counter}}
   {{#if textType}}