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

Bootstrap错误验证颜色未显示

1 个答案: