I'm trying to validate a form from using bootstrap.so far i managed to validate the form but my form is supposed to change the border color of the input into red color when a error is made. But in my form red color is not shown.

My form

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

Notice by using 'has-error' i am supposed to get the red color border.

I'm trying to validate a form from using bootstrap.so far i managed to validate the form but my form is supposed to change the border color of the input into red color when a error is made. But in my form red color is not shown.

My form

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

Notice by using 'has-error' i am supposed to get the red color border.

• javascript
• css
• twitter-bootstrap
• ionic-framework

Share Improve this question Follow asked Sep 24, 2014 at 4:29 CraZyDroiDCraZyDroiD 7,1373333 gold badges108108 silver badges196196 bronze badges 1

• look at this article: ng-newsletter./posts/validations.html – DaniKR Commented Sep 24, 2014 at 6:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You need to add .form-control class to your input if you want border to bee red or any other colour:

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

Alternatively, you can add your own 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);
}