Skip to content

Commit 8db1b91

Browse files
spadgettspadgett
committed
Bug 1479289 - Don't show env validation errors until blur
Wait until the input loses focus before showing validation errors in the key value editor. This is consistent with our other forms and prevents errors from flickering as the user types. Fixes https://bugzilla.redhat.com/show_bug.cgi?id=1479289
1 parent 8cb608b commit 8db1b91

File tree

2 files changed

+51
-43
lines changed

2 files changed

+51
-43
lines changed

‎app/views/directives/key-value-editor.html

Lines changed: 45 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<!-- The name/key block -->
2727
<div
2828
class="form-group key-value-editor-input"
29-
ng-class="{ 'has-error' : (forms.keyValueEditor[uniqueForKey(unique, $index)].$invalid) }">
29+
ng-class="{ 'has-error' : (forms.keyValueEditor[uniqueForKey(unique, $index)].$invalid && forms.keyValueEditor[uniqueForKey(unique, $index)].$touched) }">
3030

3131
<label for="uniqueForKey(unique, $index)" class="sr-only">{{keyPlaceholder}}</label>
3232

@@ -50,36 +50,38 @@
5050
spellcheck="false">
5151

5252
<!-- name/key help block -->
53-
<span
54-
class="help-block key-validation-error"
55-
ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.pattern)">
56-
<span class="validation-text">{{ entry.keyValidatorError || keyValidatorError }}</span>
57-
<span ng-if="entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip" class="help action-inline">
58-
<a
59-
aria-hidden="true"
60-
data-toggle="tooltip"
61-
data-placement="top"
62-
data-original-title="{{entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip}}">
63-
<i class="{{entry.keyValidatorErrorTooltipIcon || keyValidatorErrorTooltipIcon}}"></i>
64-
</a>
53+
<span ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$touched)">
54+
<span
55+
class="help-block key-validation-error"
56+
ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.pattern)">
57+
<span class="validation-text">{{ entry.keyValidatorError || keyValidatorError }}</span>
58+
<span ng-if="entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip" class="help action-inline">
59+
<a
60+
aria-hidden="true"
61+
data-toggle="tooltip"
62+
data-placement="top"
63+
data-original-title="{{entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip}}">
64+
<i class="{{entry.keyValidatorErrorTooltipIcon || keyValidatorErrorTooltipIcon}}"></i>
65+
</a>
66+
</span>
67+
</span>
68+
<span
69+
class="help-block key-min-length"
70+
ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.minlength)">
71+
<span class="validation-text">Minimum character count is {{keyMinlength}}</span>
72+
</span>
73+
<span
74+
class="help-block key-validation-error"
75+
ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.required)">
76+
<span class="validation-text">{{keyRequiredError}}</span>
6577
</span>
66-
</span>
67-
<span
68-
class="help-block key-min-length"
69-
ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.minlength)">
70-
<span class="validation-text">Minimum character count is {{keyMinlength}}</span>
71-
</span>
72-
<span
73-
class="help-block key-validation-error"
74-
ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.required)">
75-
<span class="validation-text">{{keyRequiredError}}</span>
7678
</span>
7779
</div>
7880

7981
<!-- the value block -->
8082
<div
8183
class="form-group key-value-editor-input"
82-
ng-class="forms.keyValueEditor[uniqueForValue(unique, $index)].$invalid ? 'has-error' : ''">
84+
ng-class="{ 'has-error': (forms.keyValueEditor[uniqueForValue(unique, $index)].$invalid && forms.keyValueEditor[uniqueForValue(unique, $index)].$touched) }">
8385

8486
<label for="uniqueForValue(unique, $index)" class="sr-only">{{valuePlaceholder}}</label>
8587

@@ -176,24 +178,26 @@
176178
</div>
177179

178180
<!-- value help block -->
179-
<span
180-
class="help-block value-validation-error"
181-
ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.pattern)">
182-
<span class="validation-text">{{ entry.valueValidatorError || valueValidatorError}}</span>
183-
<span ng-if="entry.valueValidatorErrorTooltip || valueValidatorErrorTooltip" class="help action-inline">
184-
<a
185-
aria-hidden="true"
186-
data-toggle="tooltip"
187-
data-placement="top"
188-
data-original-title="{{entry.valueValidatorErrorTooltip || valueValidatorErrorTooltip}}">
189-
<i class="{{entry.valueValidatorErrorTooltipIcon || valueValidatorErrorTooltipIcon}}"></i>
190-
</a>
181+
<span ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$touched)">
182+
<span
183+
class="help-block value-validation-error"
184+
ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.pattern)">
185+
<span class="validation-text">{{ entry.valueValidatorError || valueValidatorError}}</span>
186+
<span ng-if="entry.valueValidatorErrorTooltip || valueValidatorErrorTooltip" class="help action-inline">
187+
<a
188+
aria-hidden="true"
189+
data-toggle="tooltip"
190+
data-placement="top"
191+
data-original-title="{{entry.valueValidatorErrorTooltip || valueValidatorErrorTooltip}}">
192+
<i class="{{entry.valueValidatorErrorTooltipIcon || valueValidatorErrorTooltipIcon}}"></i>
193+
</a>
194+
</span>
195+
</span>
196+
<span
197+
class="help-block value-min-length"
198+
ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.minlength)">
199+
<span class="validation-text">Minimum character count is {{valueMinlength}}</span>
191200
</span>
192-
</span>
193-
<span
194-
class="help-block value-min-length"
195-
ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.minlength)">
196-
<span class="validation-text">Minimum character count is {{valueMinlength}}</span>
197201
</span>
198202
</div>
199203

‎dist/scripts/templates.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7264,10 +7264,11 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
72647264
"</div>\n" +
72657265
"<div class=\"key-value-editor-entry\" ng-class-odd=\"'odd'\" ng-class-even=\"'even'\" ng-repeat=\"entry in entries\" as-sortable-item>\n" +
72667266
"\n" +
7267-
"<div class=\"form-group key-value-editor-input\" ng-class=\"{ 'has-error' : (forms.keyValueEditor[uniqueForKey(unique, $index)].$invalid) }\">\n" +
7267+
"<div class=\"form-group key-value-editor-input\" ng-class=\"{ 'has-error' : (forms.keyValueEditor[uniqueForKey(unique, $index)].$invalid && forms.keyValueEditor[uniqueForKey(unique, $index)].$touched) }\">\n" +
72687268
"<label for=\"uniqueForKey(unique, $index)\" class=\"sr-only\">{{keyPlaceholder}}</label>\n" +
72697269
"<input type=\"text\" class=\"form-control\" ng-class=\"{ '{{setFocusKeyClass}}' : $last }\" id=\"{{uniqueForKey(unique, $index)}}\" name=\"{{uniqueForKey(unique, $index)}}\" ng-attr-placeholder=\"{{ (!isReadonlyAny) && keyPlaceholder || ''}}\" ng-minlength=\"{{keyMinlength}}\" maxlength=\"{{keyMaxlength}}\" ng-model=\"entry.name\" ng-readonly=\"isReadonlyAny || isReadonlySome(entry.name) || entry.isReadonlyKey || entry.isReadonly\" ng-pattern=\"validation.key\" ng-value ng-required=\"!allowEmptyKeys && entry.value\" ng-attr-key-value-editor-focus=\"{{grabFocus && $last}}\" autocorrect=\"off\" autocapitalize=\"none\" spellcheck=\"false\">\n" +
72707270
"\n" +
7271+
"<span ng-show=\"(forms.keyValueEditor[uniqueForKey(unique, $index)].$touched)\">\n" +
72717272
"<span class=\"help-block key-validation-error\" ng-show=\"(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.pattern)\">\n" +
72727273
"<span class=\"validation-text\">{{ entry.keyValidatorError || keyValidatorError }}</span>\n" +
72737274
"<span ng-if=\"entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip\" class=\"help action-inline\">\n" +
@@ -7282,9 +7283,10 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
72827283
"<span class=\"help-block key-validation-error\" ng-show=\"(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.required)\">\n" +
72837284
"<span class=\"validation-text\">{{keyRequiredError}}</span>\n" +
72847285
"</span>\n" +
7286+
"</span>\n" +
72857287
"</div>\n" +
72867288
"\n" +
7287-
"<div class=\"form-group key-value-editor-input\" ng-class=\"forms.keyValueEditor[uniqueForValue(unique, $index)].$invalid ? 'has-error' : ''\">\n" +
7289+
"<div class=\"form-group key-value-editor-input\" ng-class=\"{ 'has-error': (forms.keyValueEditor[uniqueForValue(unique, $index)].$invalid && forms.keyValueEditor[uniqueForValue(unique, $index)].$touched) }\">\n" +
72887290
"<label for=\"uniqueForValue(unique, $index)\" class=\"sr-only\">{{valuePlaceholder}}</label>\n" +
72897291
"<div ng-if=\"(!entry.valueFrom)\">\n" +
72907292
"<input type=\"text\" class=\"form-control\" ng-class=\"{ '{{setFocusValClass}}' : $last }\" id=\"{{uniqueForValue(unique, $index)}}\" name=\"{{uniqueForValue(unique, $index)}}\" ng-attr-placeholder=\"{{ (!isReadonlyAny) && valuePlaceholder || ''}}\" ng-minlength=\"{{valueMinlength}}\" maxlength=\"{{valueMaxlength}}\" ng-model=\"entry.value\" ng-readonly=\"isReadonlyAny || isReadonlySome(entry.name) || entry.isReadonly\" ng-pattern=\"validation.val\" ng-required=\"!allowEmptyKeys && entry.value\" autocorrect=\"off\" autocapitalize=\"none\" spellcheck=\"false\">\n" +
@@ -7348,6 +7350,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
73487350
"</div>\n" +
73497351
"</div>\n" +
73507352
"\n" +
7353+
"<span ng-show=\"(forms.keyValueEditor[uniqueForValue(unique, $index)].$touched)\">\n" +
73517354
"<span class=\"help-block value-validation-error\" ng-show=\"(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.pattern)\">\n" +
73527355
"<span class=\"validation-text\">{{ entry.valueValidatorError || valueValidatorError}}</span>\n" +
73537356
"<span ng-if=\"entry.valueValidatorErrorTooltip || valueValidatorErrorTooltip\" class=\"help action-inline\">\n" +
@@ -7359,6 +7362,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
73597362
"<span class=\"help-block value-min-length\" ng-show=\"(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.minlength)\">\n" +
73607363
"<span class=\"validation-text\">Minimum character count is {{valueMinlength}}</span>\n" +
73617364
"</span>\n" +
7365+
"</span>\n" +
73627366
"</div>\n" +
73637367
"<div class=\"key-value-editor-buttons\">\n" +
73647368
"<span ng-if=\"(!cannotSort) && (entries.length > 1)\" class=\"fa fa-bars sort-row\" role=\"button\" aria-label=\"Move row\" aria-grabbed=\"false\" as-sortable-item-handle></span>\n" +

0 commit comments

Comments
 (0)