验证在bootstrap html中不起作用

H V*_*rma 5 html javascript validation twitter-bootstrap-3

我通过给予它作为测试领域的验证

<div class="form-group">
  <label for="inputEmail" class="col-lg-4 col-lg-offset-1  control-label">Email address</label>
  <div class="col-lg-4">
    <input class="form-control" ng-model="$root.customerDetails.eMail" placeholder="Enter customer email" type="email" required focus value = "{{emailId}}">
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

然后我点击提交按钮,但验证无效.我可以通过电子邮件继续下一页.

还有其他方法可以进行验证.

有人可以帮助我谢谢

应该是这样的:

在此输入图像描述

Mos*_*Feu 0

验证不会自动停止提交。在您的提交功能中,您需要检查论坛是否有效。

像这样:

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.submit = function() {
    console.log('submitted');  
  }
});
Run Code Online (Sandbox Code Playgroud)
.validation {
  font-size: 80%;
  color: red;
}
Run Code Online (Sandbox Code Playgroud)
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <form name="myForm">
    <input type="text" name="txt" ng-model="txt" required /><br />
    <!--<div class="validation" ng-show="myForm.$submitted && myForm.txt.$invalid">Please fill out the field</div>-->
    <button ng-click="myForm.$valid && submit()">Submit</button><br />
    Form is valid: {{myForm.$valid}}
  </form>
</div>
Run Code Online (Sandbox Code Playgroud)