CODEWITHSUNDEEP
angularjs
user4758229
user4758229

Reputation: 259

How to make text box border red when validation fail

I need to make the textbox border color as red when validation get fail.Here I am using angulerjs validation I am not able to understand how to make the textbox color as red. Thanks in advance.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
             pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Archimedes (Beta)</title>
        <meta name="author" content="Dharm">
        <script type="text/javascript" src="../js/arc/setup/arcadmin.js"></script>
    </head>
    <body>
    <form name="preSourceThresholdForm">
         <div class="col-md-12 h6 b" style="padding-bottom: 40px;">
            <b>Configure PreSource Threshold</b>
            <input type="hidden" class="form-control" id="preSourceThresholdGroup" ng-model="admin.preSourceThresholdGroup" value="PreSource Threshold">
         </div>
         <div class="col-md-3 b" style="padding-top: 0px">
            PreSource Threshold
         </div>
         <div class="col-md-2">
            <input type="number" style="width:80px;"  min="0" max="100" name="preSourceThreshold"  ng-model="admin.preSourceThreshold" required> %
              <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number">Must Be Number!</span>
              <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max">Number Should Be Less Then 100</span>
              <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min">Number Should Be greater Then 0</span>
         </div>
         <div class="col-md-2">
            <input id="preSourceSave" type="button" ng-disabled="!admin.preSourceThreshold" ng-click="preSourceSave()" class="btn btn-default" value="Save" />
         </div>
      </form>
    </body>
    <div class="modal"></div>
    </html>

Update

Please check this below code.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Archimedes (Beta)</title>
    <meta name="author" content="Dharm">
    <script type="text/javascript" src="../js/arc/setup/arcadmin.js"></script>
</head>
<body>
<style>
  .red {
          border: solid 1px red;
      }
</style>
<form name="preSourceThresholdForm" novalidate class="form-horizontal">
     <div class="col-md-12 h6 b" style="padding-bottom: 40px;">
        <b>Configure PreSource Threshold</b>
        <input type="hidden" class="form-control" id="preSourceThresholdGroup" ng-model="admin.preSourceThresholdGroup" value="PreSource Threshold">
     </div>
     <div class="col-md-3 b" style="padding-top: 0px">
        PreSource Threshold
     </div>
     <div class="col-md-2">
        <input type="number" style="width:80px;"  min="0" max="100" name="preSourceThreshold" ng-class="{red: test.preSourceThreshold.$invalid}" ng-model="admin.preSourceThreshold" required> %
          <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number">Must Be Number!</span>
          <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max">Number Should Be Less Then 100</span>
          <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min">Number Should Be greater Then 0</span>
     </div>
     <div class="col-md-2">
        <input id="preSourceSave" type="button" ng-disabled="!admin.preSourceThreshold" ng-click="preSourceSave()" class="btn btn-default" value="Save" />
     </div>
  </form>
</body>
<div class="modal"></div>
</html>

Upvotes: 3

Views: 32723

Answers (3)

boindiil
boindiil

Reputation: 5865

You can use ng-class directive to apply a CSS class if the given condition evaluates to true:

.red {
  border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <form name="test">
    <input type="number" ng-model="MyNumber" name="MyNumber" ng-class="{red: test.MyNumber.$invalid}" />
  </form>
<div>

UPDATE

Here is the working code for your example:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app>
<style>
  .red {
          border: solid 1px red;
      }
</style>
<form name="preSourceThresholdForm" novalidate class="form-horizontal">
     <div class="col-md-12 h6 b" style="padding-bottom: 40px;">
        <b>Configure PreSource Threshold</b>
        <input type="hidden" class="form-control" id="preSourceThresholdGroup" ng-model="admin.preSourceThresholdGroup" value="PreSource Threshold">
     </div>
     <div class="col-md-3 b" style="padding-top: 0px">
        PreSource Threshold
     </div>
     <div class="col-md-2">
        <input type="number" style="width:80px;"  min="0" max="100" name="preSourceThreshold" ng-class="{red: preSourceThresholdForm.preSourceThreshold.$invalid && preSourceThresholdForm.preSourceThreshold.$dirty}" ng-model="admin.preSourceThreshold" required> %
          <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number && preSourceThresholdForm.preSourceThreshold.$dirty">Must Be Number!</span>
          <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max && preSourceThresholdForm.preSourceThreshold.$dirty">Number Should Be Less Then 100</span>
          <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min && preSourceThresholdForm.preSourceThreshold.$dirty">Number Should Be greater Then 0</span>
       <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.required && preSourceThresholdForm.preSourceThreshold.$dirty">This field is required</span>
     </div>
     <div class="col-md-2">
        <input id="preSourceSave" type="button" ng-disabled="!admin.preSourceThreshold" ng-click="preSourceSave()" class="btn btn-default" value="Save" />
     </div>
  </form>
</body>
<div class="modal"></div>
</html>

** UPDATE II **

I have added a check for $dirty to ensure that the validation only checks on updated inputs

Upvotes: 3

Anita
Anita

Reputation: 2400

<form name="preSourceThresholdForm" novalidate class="form-horizontal">
  <div class="form-group">
        <div ng-class="{'has-error': preSourceThresholdForm.preSourceThreshold.$invalid && (preSourceThresholdForm.preSourceThreshold.$dirty )}">  
          <input type="number" style="width:80px;"  min="0" max="100" name="preSourceThreshold"  ng-model="admin.preSourceThreshold" class="form-control" required> %
                 <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number">Must Be Number!</span>
                  <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max">Number Should Be Less Then 100</span>
                  <span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min">Number Should Be greater Then 0</span>
        </div>
</div>
</form>

Try this.

Upvotes: 0

c4605
c4605

Reputation: 185

You can add a css:

input.ng-invalid {
  border-color: red;
}

Because angularjs will add class ng-invalid to input when validation failed.

You can read document here: https://docs.angularjs.org/guide/forms#using-css-classes

Upvotes: 2

Related Questions