diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less
index cd0db22747..77830b329c 100644
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/awx/ui/client/legacy-styles/ansible-ui.less
@@ -342,10 +342,6 @@ textarea.allowresize {
   }
 }
 
-.foobar {
-  color: @red;
-}
-
 .subtitle {
   font-size: 16px;
 }
diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less
index 76f8bd002c..4fb40e395d 100644
--- a/awx/ui/client/legacy-styles/forms.less
+++ b/awx/ui/client/legacy-styles/forms.less
@@ -700,6 +700,10 @@ input[type='radio']:checked:before {
     width: 30px;
 }
 
+.Form-requiredAsterisk {
+  color: @red;
+}
+
 @media only screen and (max-width: 650px) {
     .Form-formGroup {
         flex: 1 0 auto;
diff --git a/awx/ui/client/src/job-submission/job-submission-factories/prompt-for-passwords.factory.js b/awx/ui/client/src/job-submission/job-submission-factories/prompt-for-passwords.factory.js
index 05ef967b84..40557c58c3 100644
--- a/awx/ui/client/src/job-submission/job-submission-factories/prompt-for-passwords.factory.js
+++ b/awx/ui/client/src/job-submission/job-submission-factories/prompt-for-passwords.factory.js
@@ -19,7 +19,7 @@ export default
                 scope[fld] = '';
                 html += "<div class=\"form-group\">\n";
                 html += "<label for=\"" + fld + "\">";
-                html += '<span class="foobar">*</span>';
+                html += '<span class="Form-requiredAsterisk">*</span>';
                 html += '<span>' + field.label + '</span>';
                 html += "</label>\n";
                 html += "<input type=\"password\" ";
@@ -42,7 +42,7 @@ export default
                     scope[fld] = '';
                     html += "<div class=\"form-group\">\n";
                     html += "<label for=\"" + fld + "\"> " + field.label + "</label>\n";
-                    html += '<span class="foobar">*</span>';
+                    html += '<span class="Form-requiredAsterisk">*</span>';
                     html += "<input type=\"password\" ";
                     html += "ng-model=\"" + fld + '" ';
                     html += 'name="' + fld + '" ';
diff --git a/awx/ui/client/src/job-submission/job-submission.partial.html b/awx/ui/client/src/job-submission/job-submission.partial.html
index b970da5193..75f3951ae3 100644
--- a/awx/ui/client/src/job-submission/job-submission.partial.html
+++ b/awx/ui/client/src/job-submission/job-submission.partial.html
@@ -100,7 +100,7 @@
                         <form name="forms.credentialpasswords" autocomplete="off" novalidate>
                             <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="ssh_password_required">
                                 <label for="ssh_password" class="Form-inputLabelContainer">
-                                    <span class="foobar">*</span>
+                                    <span class="Form-requiredAsterisk">*</span>
                                     <span class="Form-inputLabel" translate> Password</span>
                                 </label>
                                 <div class="input-group">
@@ -114,7 +114,7 @@
                             </div>
                             <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="ssh_key_unlock_required">
                                 <label for="ssh_key_unlock" class="Form-inputLabelContainer">
-                                    <span class="foobar">*</span>
+                                    <span class="Form-requiredAsterisk">*</span>
                                     <span class="Form-inputLabel" translate> Private Key Passphrase</span>
                                 </label>
                                 <div class="input-group">
@@ -128,7 +128,7 @@
                             </div>
                             <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="become_password_required">
                                 <label for="become_password" class="Form-inputLabelContainer">
-                                    <span class="foobar">*</span>
+                                    <span class="Form-requiredAsterisk">*</span>
                                     <span class="Form-inputLabel" translate> Privilege Escalation Password</span>
                                 </label>
                                 <div class="input-group">
@@ -142,7 +142,7 @@
                             </div>
                             <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="vault_password_required">
                                 <label for="vault_password" class="Form-inputLabelContainer">
-                                    <span class="foobar">*</span>
+                                    <span class="Form-requiredAsterisk">*</span>
                                     <span class="Form-inputLabel" translate> Vault Password</span>
                                 </label>
                                 <div class="input-group">
@@ -179,7 +179,7 @@
                     </div>
                     <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="ask_verbosity_on_launch">
                         <label for="verbosity" class="Form-inputLabelContainer">
-                            <span class="foobar">*</span>
+                            <span class="Form-requiredAsterisk">*</span>
                             <span class="Form-inputLabel" translate> Verbosity</span>
                         </label>
                         <div>
@@ -198,7 +198,7 @@
                     </div>
                     <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="ask_job_type_on_launch">
                         <label for="job_type" class="Form-inputLabelContainer">
-                            <span class="foobar">*</span>
+                            <span class="Form-requiredAsterisk">*</span>
                             <span class="Form-inputLabel" translate> Job Type</span>
                         </label>
                         <div>
@@ -276,7 +276,7 @@
                 <form name="forms.survey" autocomplete="off" novalidate>
                     <div ng-repeat="question in survey_questions" id="taker_'+question.index+'" class="form-group Form-formGroup Form-formGroup--singleColumn">
                         <label ng-attr-for="{{question.variable}}" class="Form-inputLabelContainer">
-                            <span ng-show="question.required===true" class="foobar">*</span>
+                            <span ng-show="question.required===true" class="Form-requiredAsterisk">*</span>
                             <span class="label-text Form-inputLabel"> {{question.question_name}}</span>
                         </label>
 
diff --git a/awx/ui/client/src/license/license.partial.html b/awx/ui/client/src/license/license.partial.html
index 67202500ef..7b8bfe3499 100644
--- a/awx/ui/client/src/license/license.partial.html
+++ b/awx/ui/client/src/license/license.partial.html
@@ -100,7 +100,7 @@
 
 				<form id="License-form" name="uploadlicense">
 					<div class="License-subTitleText">
-						<span class="foobar">*</span>
+						<span class="Form-requiredAsterisk">*</span>
 						<translate>License File</translate>
 					</div>
 					<div class="input-group License-file--container">
@@ -108,8 +108,8 @@
                         <span class="License-fileName" ng-class="{'License-helperText' : fileName == 'No file selected.'}">{{fileName|translate}}</span>
 						<input id="License-file" class="form-control" type="file" file-on-change="getKey"/>
 					</div>
-					<div class="License-subTitleText"> 
-						<span class="foobar">*</span>
+					<div class="License-subTitleText">
+						<span class="Form-requiredAsterisk">*</span>
 						<translate>End User License Agreement</translate>
 					</div>
 					<div id="eula_notice"
diff --git a/awx/ui/client/src/partials/survey-maker-modal.html b/awx/ui/client/src/partials/survey-maker-modal.html
index 882c833c61..5385a14b28 100644
--- a/awx/ui/client/src/partials/survey-maker-modal.html
+++ b/awx/ui/client/src/partials/survey-maker-modal.html
@@ -48,7 +48,7 @@
                             <dnd-nodrag>
                                 <div>
                                     <label class="SurveyMaker-previewLabel" for="question.variable">
-                                        <span ng-show="question.required===true" class="foobar">*</span>
+                                        <span ng-show="question.required===true" class="Form-requiredAsterisk">*</span>
                                         <span class="label-text"> {{question.question_name}}</span>
                                     </label>
                                 </div>
diff --git a/awx/ui/client/src/shared/directives.js b/awx/ui/client/src/shared/directives.js
index 9ffde032df..71684933d7 100644
--- a/awx/ui/client/src/shared/directives.js
+++ b/awx/ui/client/src/shared/directives.js
@@ -417,14 +417,14 @@ function(ConfigurationUtils, i18n, $rootScope) {
 // Make a field required conditionally using an expression. If the expression evaluates to true, the
 // field will be required. Otherwise, the required attribute will be removed.
 //
-.directive('awRequiredWhen', ['$timeout', function($timeout) {
+.directive('awRequiredWhen', function() {
     return {
         require: 'ngModel',
         compile: function(tElem) {
             return {
                 pre: function preLink() {
                     let label = $(tElem).closest('.form-group').find('label').first();
-                    $(label).prepend('<span class="foobar">*</span>');
+                    $(label).prepend('<span class="Form-requiredAsterisk">*</span>');
                 },
                 post: function postLink( scope, elm, attrs, ctrl ) {
                     function updateRequired() {
@@ -436,13 +436,13 @@ function(ConfigurationUtils, i18n, $rootScope) {
 
                         if (isRequired && (elm.attr('required') === null || elm.attr('required') === undefined)) {
                             $(elm).attr('required', 'required');
-                            if(!$(label).find('span.foobar').length){
-                                $(label).prepend('<span class="foobar">*</span>');
+                            if(!$(label).find('span.Form-requiredAsterisk').length){
+                                $(label).prepend('<span class="Form-requiredAsterisk">*</span>');
                             }
                         } else if (!isRequired) {
                             elm.removeAttr('required');
                             if (!attrs.awrequiredAlwaysShowAsterisk) {
-                                $(label).find('span.foobar')[0].remove();
+                                $(label).find('span.Form-requiredAsterisk')[0].remove();
                             }
                         }
                         if (isRequired && (viewValue === undefined || viewValue === null || viewValue === '')) {
@@ -464,7 +464,7 @@ function(ConfigurationUtils, i18n, $rootScope) {
             };
         }
     };
-}])
+})
 
 // awPlaceholder: Dynamic placeholder set to a scope variable you want watched.
 //                Value will be place in field placeholder attribute.
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index da6dfbdf98..704ed857f9 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -639,7 +639,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
                         html += "for=\"" + fld + '">\n';
 
-                        html += `${field.required ? '<span class="foobar">*</span>' : ''}`;
+                        html += `${field.required ? '<span class="Form-requiredAsterisk">*</span>' : ''}`;
 
                         html += (field.icon) ? Icon(field.icon) : "";
                         if (field.labelBind) {