Validates extra vars before moving to next step in prompt workflow

awx/ui/client/src/templates/prompt/prompt.controller.js

@@ -158,6 +158,13 @@ export default [ 'Rest', 'GetBasePath', 'ProcessErrors', 'CredentialTypeModel',
                                 order: order
                             };
                             order++;
+
+                            let codemirror = () =>  {
+                                return {
+                                    validate:{}
+                                };
+                            };
+                            vm.codeMirror = new codemirror();
                         }
                         if(vm.promptDataClone.launchConf.survey_enabled) {
                             vm.steps.survey.includeStep = true;
@@ -189,6 +196,16 @@ export default [ 'Rest', 'GetBasePath', 'ProcessErrors', 'CredentialTypeModel',
         };
 
         vm.next = (currentTab) => {
+            if(_.has(vm.steps.other_prompts, 'tab._active') && vm.steps.other_prompts.tab._active === true){
+                try {
+                    if (vm.codeMirror.validate) {
+                        vm.codeMirror.validate();
+                    }
+                } catch (err) {
+                    event.preventDefault();
+                    return;
+                }
+            }
             Object.keys(vm.steps).forEach(step => {
                 if(vm.steps[step].tab) {
                     if(vm.steps[step].tab.order === currentTab.order) {

awx/ui/client/src/templates/prompt/prompt.partial.html

@@ -19,7 +19,7 @@
                 </prompt-credential>
             </div>
             <div ng-if="vm.steps.other_prompts.includeStep" ng-show="vm.steps.other_prompts.tab._active">
-                <prompt-other-prompts prompt-data="vm.promptDataClone" other-prompts-form="vm.forms.otherPrompts" is-active-step="vm.steps.other_prompts.tab._active"></prompt-other-prompts>
+                <prompt-other-prompts prompt-data="vm.promptDataClone" other-prompts-form="vm.forms.otherPrompts" is-active-step="vm.steps.other_prompts.tab._active" validate="vm.codeMirror.validate"></prompt-other-prompts>
             </div>
             <div ng-if="vm.steps.survey.includeStep" ng-show="vm.steps.survey.tab._active">
                 <prompt-survey prompt-data="vm.promptDataClone" survey-form="vm.forms.survey"></prompt-survey>

awx/ui/client/src/templates/prompt/steps/other-prompts/prompt-other-prompts.controller.js

@@ -5,7 +5,7 @@
  *************************************************/
 
 export default
-    ['ParseTypeChange', 'CreateSelect2', 'TemplatesStrings', '$timeout', function(ParseTypeChange, CreateSelect2, strings, $timeout) {
+    ['ParseTypeChange', 'CreateSelect2', 'TemplatesStrings', '$timeout', 'ToJSON', function(ParseTypeChange, CreateSelect2, strings, $timeout, ToJSON) {
             const vm = this;
 
             vm.strings = strings;
@@ -79,8 +79,15 @@ export default
                         codemirrorExtraVars();
                     }
                 });
+
+                function validate () {
+                    return ToJSON(scope.parseType, scope.extraVariables, true);
+                }
+                scope.validate = validate;
             };
 
+
+
             vm.toggleDiff = () => {
                 scope.promptData.prompts.diffMode.value = !scope.promptData.prompts.diffMode.value;
             };

awx/ui/client/src/templates/prompt/steps/other-prompts/prompt-other-prompts.directive.js

@@ -12,7 +12,8 @@ export default [ 'templateUrl',
         scope: {
             promptData: '=',
             otherPromptsForm: '=',
-            isActiveStep: '='
+            isActiveStep: '=',
+            validate: '='
         },
         templateUrl: templateUrl('templates/prompt/steps/other-prompts/prompt-other-prompts'),
         controller: promptOtherPrompts,