javascript - Bootstrap 错误验证颜色未显示

Question

我正在尝试使用 bootstrap 验证表单。到目前为止，我设法验证了表单，但我的表单应该在出错时将输入的边框颜色更改为红色。但是在我的表格中没有显示红色。

我的表单

<ion-view title="Contact Us">

  <ion-content class="has-header" overflow-scroll="true" padding="true">

    <div class="page-header"><h1>Give us your Feedback</h1></div>


    <!-- pass in the variable if our form is valid or invalid -->
    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>


        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
            <label>Name*</label>
            <input type="text" name="name" class="item-input-wrapper" ng-model="user.name"  required>
            <p ng-show="userForm.name.$invalid && !userForm.name.$pristine " class="help-block"><font color="#009ACD">You name is required.</font></p>


        </div>

         <!-- EMAIL -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine  }">
            <label>Email</label>
            <input type="email" name="email" class="item-input-wrapper" ng-model="user.email" required >
            <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block"><font color="#009ACD">Enter a valid email.</font></p>
        </div>

        <!-- USERNAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
            <label>Description</label>
            <input type="text" name="username" class="item-input-wrapper" ng-model="user.username"  ng-minlength="5" ng-maxlength="60" required>
            <font color="white"><p ng-show="userForm.username.$error.minlength" class="help-block"><font color="#009ACD">Description is too short.</font></p>
            <p ng-show="userForm.username.$error.maxlength" class="help-block"><font color="#009ACD">Description is too long.</font></p>
        </div>

       <div class="col"style="text-align: center">
            <button align="left"class="button button-block button-reset"style="display: inline-block;width:100px;text-align:center "
            type="reset"
            ng-click="reset()"padding-top="true">Reset</button>


            <button class="button button-block button-positive"  style="display: inline-block;width:100px "
            ng-click="submitform()"padding-top="true">Submit</button>
            </div>
</form>
</div>
  </ion-content>
</ion-view>

注意使用'has-error'我应该得到红色边框。

Answer 1

如果您希望边框变为红色或任何其他颜色，您需要将 .form-control 类添加到您的输入:

<input type="text" name="name" class="item-input-wrapper form-control" ng-model="user.name"  required>

或者，您可以添加自己的 css:

.has-error input[type=text], 
.has-error input[type=email], 
.has-error select {
    border-color: #2f2f2f;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}