Angularjs：在不使用表单的情况下验证模态元素

Question

我有这个没有表格标签的模态。但我想在用户继续点击这两个按钮中的任何一个之前验证所有内部元素。

<div id="modal-invoice-member" class="modal fade" data-backdrop="static">
<!-- Modal Dialog -->
<div class="modal-dialog">
    <!-- Modal Content -->
    <div class="modal-content">

        <!-- Modal Body -->
        <div class="modal-body remove-padding">
            <!-- Modal Tabs -->
            <div class="block-tabs block-themed">
                <div class="block-options">
                    <a href="javascript:void(0)" class="btn btn-option" data-dismiss="modal">×</a>
                </div>
                <ul class="nav nav-tabs" data-toggle="tabs">
                    <li class="active"><a href="#modal-invoice-member-data"><i class="gi gi-user"></i> Member Details</a></li>
                </ul>
                <div class="tab-content">
                    <!-- Account Tab Content -->
                    <div class="tab-pane active" id="modal-invoice-member-data">

                            <div class="form-group">
                                <label class="control-label col-md-3">Name<span style="color:red">*</span></label>
                                <div class="col-md-8"  >
                                    <input type="text" style="text-transform: capitalize;" name="name" ng-model="user.name" class="form-control input" placeholder="First...  Last...  Middle..." required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3" >Contact<span style="color:red">*</span></label>
                                <div class="col-md-4">
                                    <div class="input-group ">
                                        <input type="text" ng-pattern="/^[7-9][0-9]{9}$/" style="text-transform: capitalize;" name="mobile" ng-model="user.mobile" class="form-control digits" maxlength="10" placeholder="Mobile" required>
                                    </div>
                                </div>
                                <div class="col-md-4" >
                                    <div class="input-group ">
                                        <input type="text"  name="email" ng-model="user.email"  class="form-control input" placeholder="Email" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Gender<span style="color:red">*</span></label>
                                <div class="col-md-9" style="top:5px;">
                                    <label class="col-md-3" for="gender">                                
                                        <input type="radio" id="gender" name="gender" ng-model="user.gender" value="F" required=""> Female
                                    </label>
                                    <label class="col-md-3" for="gender">
                                       <input type="radio" id="gender" name="gender" ng-model="user.gender" value="M"  ng-checked="true" required=""> Male
                                    </label>
                                    <label class="col-md-3" for="gender">                               
                                        <input type="radio" id="gender" name="gender" ng-model="user.gender" value="O" required=""> Other
                                    </label>
                                </div>
                            </div>

                    </div>
                    <!-- END Account Tab Content -->
                </div>
            </div>
            <!-- END Modal Tabs -->
        </div>
        <!-- END Modal Body -->

        <!-- Modal footer -->
        <div class="modal-footer">
            <button class="btn btn-success" type="submit"  ng-click="saveMember()"><i class="fa fa-check"></i> Save</button>
            <button class="btn btn-warning" data-dismiss="modal" ng-click="addItem()"><i class="fa fa-plus"></i> Add Item</button>
        </div>
        <!-- END Modal footer -->

    </div>
    <!-- END Modal Content -->
</div>
<!-- END Modal Dialog -->

我想在用户点击任何按钮之前填写所有字段。当有空元素时，边框颜色应该变为红色。 新想法也欢迎。 谢谢