如果仅在输入字段之外单击而不是在填充文本框时输入无效，如何将边框颜色变为红色？答案

【问题标题】：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.?如果仅在输入字段之外单击而不是在填充文本框时输入无效，如何将边框颜色变为红色？
【发布时间】：2017-06-06 16:15:51
【问题描述】：

我正在尝试这样做，但即使我在输入字段中输入一个字母并且在输入有效之前无法正常显示，边框颜色也会变为红色。我希望在无效输入上将边框颜色变为红色，但在单击该文本框外部之后。请提供一些解决方案。

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

【问题讨论】：

这里是解决方案stackoverflow.com/questions/15798594/…

标签： html css angularjs

【解决方案1】：

验证字段时需要做的两件事是确保输入具有以下所有属性：

类型，ng-model，名称，是表单的一部分，要添加的类
错误/成功还有：
内置验证工作的正确路径。

永远都是：

nameOfTheForm.nameOfTheInput.$error.typeOfInput

在你的情况下这是有效的和感动的：

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

Angular Docs for forms- 查看自定义模型更新触发器和自定义验证

这是一个例子：

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>

希望对您有所帮助，祝您编码愉快！

编辑：添加以下行以重新验证焦点上的输入。

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

并将and语句添加到错误消息的ng-show中。

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

编辑：有条件地显示表单（您仍然需要更改 formTwo 的模型和绑定，以便它们不会相互覆盖）

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>

【讨论】：

感谢@alphapilgrim 的回答。但我的问题已部分解决。当我应用 ng-model-options="{ updateOn: 'blur' }" 然后它运行良好但是当我再次单击文本框时，我希望边框颜色应该像往常一样显示......
@sumitkumar 我已经更新了答案以重新验证焦点模型，应该可以解决问题
抱歉@alpha，但我没有足够的声望点来支持您的回复。
@sumitkumar 我认为在任何代表级别，如果我没记错的话，您可以接受答案。
@sumitkumar 通常你必须提出新问题，但我可以提供附加功能的准系统。