ocket8888 commented on a change in pull request #5934: URL: https://github.com/apache/trafficcontrol/pull/5934#discussion_r651282951
########## File path: traffic_portal/app/src/common/modules/dialog/select/lock/dialog.select.lock.tpl.html ########## @@ -0,0 +1,69 @@ +<!-- +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +--> + +<div class="modal-header"> + <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <h4 class="modal-title">Create CDN Lock</h4> +</div> +<div class="modal-body"> + <form name="lockForm" novalidate> + <div class="row"> + <div class="col-sm-12 col-md-12"> + <div class="form-group" ng-class="{'has-error': hasError(lockForm.cdn), 'has-feedback': hasError(lockForm.cdn)}"> + <label class="control-label" for="cdn">CDN * + <small class="input-error" ng-show="hasPropertyError(lockForm.cdn, 'required')">Required</small> + </label> + <select id="cdn" name="cdn" class="form-control" ng-model="lock.cdn" ng-options="cdn.name as cdn.name for cdn in cdns" required> Review comment: Alternatively, you could just let the browser handle showing errors, since there are no non-standard constraints being placed on the inputs. All I had to do was move the footer inside the form, swap the nesting of the form and the modal body, and switch the handler from a `button[type="button"]` click event to the submit event of the form, then make that button `type="submit"` (which can be done implicitly). So: ```html <div class="modal-header"> <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Create CDN Lock</h4> </div> <form ng-submit="select()"> <div class="modal-body"> <div class="row"> <div class="col-sm-12 col-md-12"> <div class="form-group"> <label class="control-label" for="cdn">CDN</label> <select id="cdn" name="cdn" class="form-control" ng-model="lock.cdn" ng-options="cdn.name as cdn.name for cdn in cdns" required> <option disabled hidden selected value="">Select...</option> </select> </div> </div> </div> <div class="row"> <div class="col-sm-12 col-md-12"> <div class="form-group"> <label class="control-label" for="message">Message *</label> <input id="message" name="message" type="text" class="form-control" ng-model="lock.message" maxlength="256" required autofocus> </div> </div> </div> <div class="row"> <div class="col-sm-12 col-md-12"> <fieldset class="form-group" ng-class="{'has-error': hasError(lockform.lockType)}"> <legend> <label class="has-tooltip" for="soft">Type <i class="fa fa-info-circle has-tooltip"></i><div class="helptooltip"> <div class="helptext"> <dl> <dt>soft</dt> <dd>A <dfn>soft</dfn> lock will prevent others from queueing server updates or snapshotting the locked CDN.</dd> <dt>hard</dt> <dd>A <dfn>hard</dfn> lock will prevent others from queueing server updates or snapshotting the locked CDN. It will also block others from making changes that would change the state of the locked CDN.</dd> </dl> </div> </div> </label> </legend> <div style="display: grid; grid-template-columns: auto 1fr; justify-items: start; grid-column-gap: 1.5em; grid-row-gap: 5px;"> <div class="row"> <label for="soft">Soft</label> <input id="soft" name="lockType" type="radio" ng-model="lock.soft" ng-value="true" required> </div> <div class="row"> <label for="hard">Hard</label> <input id="hard" name="lockType" type="radio" ng-model="lock.soft" ng-value="false" required> </div> </div> </fieldset> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn action-btn" ng-click="cancel()">Cancel</button> <button class="btn btn-link">Submit</button> </div> </form> ``` also puts labels on each radio-button control, rather than just text next to them that isn't related in the DOM, which should be done. But it makes some changes to the help tooltip that don't work without extra effort, so ignore those. With those changes, when I click "Submit" without entering a message, I see:  -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected]
