how to turn border color red if input is not valid only when clicked outside of the input field but not at the time of filling the textbox.?

Question

i am trying to do like this but border color turns red even i type a single letter into the input field and not getting normal till the input is valid. i am wishing to turn the border color red on invalid input but after clicking outside of that textbox. please provide some solution.

<html>
 <head>
 <style>
input.ng-invalid.ng-dirty{border:1px solid red;}
    textarea.ng-invalid.ng-dirty{border:1px solid red;}
    /*button{width: 100px;height: 30px;}*/
    </style>
</head>

<body>
    <div ng-controller="myCtrl" class="form-contact-in">
                      <form name="frm" ng-submit="submit(frm.$valid)">
                        <input name="name"
                               type="text" 
                               ng-model="user.name"
                               placeholder="Name"
                               ng-minlength="3"
                               ng-maxlength="15"
                               class="contactusform" 
                               required>
                               <span ng-show="frm.name.$dirty && frm.name.$error.required">Name Required</span>
                               <span ng-show="frm.name.$dirty && frm.name.$error.minlength">too short</span>
                               <span ng-show="frm.name.$dirty && frm.name.$error.maxlength">too long</span><br>

                        <input name="email"
                               type="email"
                               ng-model="user.email" 
                               placeholder="Email" 
                               class="contactusform" 
                               required>
                               <span ng-show="frm.email.$dirty && frm.email.$error.required">Email Required</span>
                               <span ng-show="frm.email.$dirty && frm.email.$error.email">Enter a valid email</span><br>

                        <input type="number" 
                               placeholder="Phone Number" 
                               name="mobile"
                               ng-model="user.mobile" 
                               ng-pattern="mobRegex"
                               ng-minlength="10"
                               class="contactusform"                             
                               required>  
                               <span ng-show="frm.mobile.$dirty && frm.mobile.$error.required">required</span>
                               <span ng-show="frm.mobile.$dirty && frm.mobile.$error.number">required</span>
                               <span ng-show="frm.mobile.$dirty && frm.mobile.$error.pattern">Required a valid mobile no.</span><br>                          


                         <textarea name="message" 
                                   cols="20" 
                                   rows="4" 
                                   placeholder="Message"
                                   class="contactusform" 
                                   ng-model="user.message" 
                                   ng-minlength="5"                               
                                   required>                                   
                         </textarea>
                                <span ng-show="frm.message.$dirty && frm.message.$error.required">required</span>
                                <span ng-show="frm.message.$dirty && frm.message.$error.minlength">at least 5 chars needed</span><br>
                        <div class="buttonsec2contactpage">
                        <button type="submit" class="button-contactform2">SEND</button>
                        </div>

                        <p id="contactSubmitMessage">
                        </p>
                        </form>
                    </div>
<script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>
  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope, $http) {
        $scope.mobRegex=/^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/;
        $scope.submit=function(){

            console.log("mobile"+ $scope.user.mobile);


        };
    });
  </script>
</body>
</html>

Here is the solution http://stackoverflow.com/questions/15798594/angularjs-forms-validate-fields-after-user-has-left-field — Devsullo, Jan 21 '17 at 21:28

alphapilgrim · Accepted Answer · 2017-01-26T15:16:05.920

The two things you need when validating a field is to make sure the input has all the following attributes:

type, ng-model, name, is a part of a form, class to be added on
error/success also:
correct path for the built in validation to work.

Always going to be:

nameOfTheForm.nameOfTheInput.$error.typeOfInput

Here is valid and touched in your case:

(nameOfTheForm.nameOfTheInput.$valid.typeOfInput && nameOfTheForm.nameOfTheInput.$touched)

Angular Docs for forms- look at Custom model update triggers and Custom Validation

Here is an example:

function exampleController($scope) {
  $scope.email = '';
}

angular
  .module('example', [])
  .controller('exampleController', exampleController);

.error {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div class="container-fluid" ng-app="example">
  <div class="container" ng-controller="exampleController">
    <form name=example>
      <input 
             type="email" 
             name="email"
             placeholder="type to get started"
             ng-model="email" 
             ng-focus="example.email.$setUntouched()"
             ng-class="{'error': example.email.$error.email}" 
             ng-model-options="{ updateOn: 'blur' }"/>
      <p ng-show="example.email.$valid && example.email.$touched">All good here!!!</p>
      <p ng-show="example.email.$error.email && example.email.$touched">Now error is show! :)</p>
    </form>
  </div>
</div>

Hope it helps, happy coding!

Edit: added the following line to revalidate the input on focus.

ng-focus="example.email.$setUntouched()"

and added the and statement to the ng-show of the error message.

example.email.$error.email && example.email.$touched

Edit: conditionally show form (you still need to change formTwo's model and bindings so that they don't override each other)

function exampleController($scope) {
  $scope.email = '';
  $scope.formOne = true;

  $scope.showFormTwo = function() {
    $scope.formOne = !$scope.formOne;
  };
}

angular
  .module('example', [])
  .controller('exampleController', exampleController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div class="container-fluid" ng-app="example">
  <div class="container" ng-controller="exampleController">
    <button ng-click="showFormTwo()">Change form</button>
    <div class="formOne" ng-if="formOne">
      <h1>Form One</h1>
      <form name=example>
        <input type="email" name="email" placeholder="form one, type to get started" ng-model="email" ng-focus="example.email.$setUntouched()" ng-class="{'error': example.email.$error.email}" ng-model-options="{ updateOn: 'blur' }" />
        <p ng-show="example.email.$valid && example.email.$touched">All good here!!!</p>
        <p ng-show="example.email.$error.email && example.email.$touched">Now error is show! :)</p>
      </form>
    </div>
    <div class="formTwo" ng-if="!formOne">
      <h1>Form Two</h1>
      <form name=example>
        <input type="email" name="email" placeholder="form two, type to get started" ng-model="email" ng-focus="example.email.$setUntouched()" ng-class="{'error': example.email.$error.email}" ng-model-options="{ updateOn: 'blur' }" />
        <p ng-show="example.email.$valid && example.email.$touched">All good here!!!</p>
        <p ng-show="example.email.$error.email && example.email.$touched">Now error is show! :)</p>
      </form>
    </div>
  </div>
</div>

thanks @alphapilgrim for the answer.but my problem is resolved partially. when i applied ng-model-options="{ updateOn: 'blur' }" then it is working well but when i click again to the textbox i want the border color should appear as usual... — Sunny, Jan 23 '17 at 19:17
@sumitkumar i have update the answer to revalidate the model on focus, should do the trick — alphapilgrim, Jan 23 '17 at 20:32
Sorry @alpha but I do not have enough reputation points to upvote your response. — Sunny, Jan 24 '17 at 11:10
@sumitkumar i think at any rep level you can accept the answer if I'm not mistaken. — alphapilgrim, Jan 24 '17 at 18:00
hey @alpha my requirement is now like... i have to hide present "form" and try to show an another form on single button click. But without using Popup modal. if you have any idea or solution then please suggest . — Sunny, Jan 25 '17 at 20:16
@sumitkumar usually youd have to ask in new question but i can help with barebones of the added feature. — alphapilgrim, Jan 26 '17 at 15:16

how to turn border color red if input is not valid only when clicked outside of the input field but not at the time of filling the textbox.?

1 Answers1