Bootstrap錯誤驗證顏色沒有顯示

Question

我試圖從使用bootstrap.so驗證表單到目前爲止我設法驗證表單，但我的表單應該在輸入錯誤時將輸入的邊框顏色更改爲紅色。但在我的表格中，紅色沒有顯示。

我的形式

<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> 

使用通知「錯誤」我應該得到的紅色邊界。

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); 
}