Bootstrap错误验证颜色未显示

疯狂的DroiD

我试图通过使用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”,我应该得到红色边框。

莫非斯

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

MVC视图未显示验证错误

来自分类Dev

TextBox验证未显示错误

来自分类Dev

自定义验证器未显示错误

来自分类Dev

Codeigniter表单验证未显示错误

来自分类Dev

动态淘汰赛验证未显示错误消息

来自分类Dev

Spring MVC验证器中未显示错误消息

来自分类Dev

HTML验证程序显示PHP未显示的PHP错误

来自分类Dev

剃刀@ Html.ValidationMessageFor()未显示“验证错误消息”

来自分类Dev

PrimeFaces输入组件在验证错误时未突出显示

来自分类Dev

自定义错误验证消息未显示

来自分类Dev

Laravel 5.2-验证错误未显示

来自分类Dev

在登录页面上未显示验证错误

来自分类Dev

React Native,来自Formik-Yup验证的错误未显示

来自分类Dev

文本表单字段验证器错误消息未显示

来自分类Dev

雪花验证功能未显示错误

来自分类Dev

表单验证错误未显示在Django的HTML页面中

来自分类Dev

Vuetify错误消息颜色未显示

来自分类Dev

表单验证错误消息未显示在ModelForm中

来自分类Dev

MVC视图未显示验证错误

来自分类Dev

自定义验证器未显示错误

来自分类Dev

TextBox验证未显示错误

来自分类Dev

覆盖errorPlacement时,jQuery验证未显示正确的错误

来自分类Dev

条带验证错误未显示

来自分类Dev

cakePHP验证错误未显示

来自分类Dev

验证错误未与AJAX一起显示

来自分类Dev

PHP验证错误未显示在下拉列表上

来自分类Dev

未显示Codeigniter验证错误

来自分类Dev

验证错误未显示

来自分类Dev

gui 上未显示角度验证错误?